CSS CSS Layout Basics Getting Started with CSS Layout Layout Wrapper Challenge

Sam Nigh
Sam Nigh
2,335 Points

class container

Why does this keep asking me for a closing </div> when I clearly added one for the new container?

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with CSS Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
    <body>
        <header>
            <h1>Best City Guide</h1>
        </header>
<div class="container">
        <div class="main">
            <h2>Welcome!</h2>
            <p>Dessert toffee chocolate lollipop fruitcake cake sweet. Pudding cotton candy chocolate pudding liquorice jelly marzipan. Muffin gummies topping lollipop. Caramels chocolate cake donut liquorice.</p>
            <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll.</p>
        </div>
    </div>
        <footer>
            <p>&copy;2015 Residents of The Best City.</p>
        </footer>
    </body>
</html>
style.css
/* Complete the challenge by writing CSS below */

4 Answers

Sam Nigh
Sam Nigh
2,335 Points

Thanks, I appreciate the help! But it's not letting me get to Task 2... not sure how I'd reference this answer...

Matt Hanson
MOD
Matt Hanson
Treehouse Moderator 17,725 Points

Not sure why it's asking you for a closing tag, but it did specify to wrap everything in the body with the "container" div, and you have the div starting after your header. Place it directly after your opening body tag and give it a shot. It passed for me. Hope this helps!

Hi Sam. You have the correct code typed, but it is in the wrong spot. Since the challenge wants us to make a wrapper around the whole body content, we have to put one right after that element. Move the opening "div" tag directly after the opening "body" tag. Move the closing "div" tag right before the closing "body" tag. It should look something like this:

<!DOCTYPE html>

<html>

<head>

<title>Getting Started with CSS Layout</title>

<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="page.css">

<link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="container">

    <header>

        <h1>Best City Guide</h1>

    </header>

    <div class="main">

        <h2>Welcome!</h2>

        <p>Dessert toffee chocolate lollipop fruitcake cake sweet. Pudding cotton candy chocolate pudding liquorice jelly marzipan. Muffin gummies topping lollipop. Caramels chocolate cake donut liquorice.</p>

        <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll.</p>

</div>

    <footer>

        <p>&copy;2015 Residents of The Best City.</p>

    </footer>

  </div>

</body>

</html>

Hope this was helpful. :D

Sam Nigh
Sam Nigh
2,335 Points

Hi thanks so much for the help! It's much appreciated!

I agree that both of them in real life would work.

The problem is that neither of these is the 'correct' answer according to Treehouse.

Sam Nigh
Sam Nigh
2,335 Points

I think this is a bug!

Hey Sam. The code above was for the html file only on Task 1. To complete task 2, go to the .css file and use:

/* Complete the challenge by writing CSS below */

.container {

width: 80%;

margin-right: auto;

margin-left: auto;

}

Hope this helped.