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

How do I add the wrapper <div>tag

Am not understanding this question

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>
  <div>
            <h1>Best City Guide</h1>
    </div>
        </header>


<div class="container">
            <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>
    </body>
</html>
style.css
/* Complete the challenge by writing CSS below */

2 Answers

Brian MacDonald
Brian MacDonald
4,951 Points

Hi Abdullahi

In your snippet it looks like things have been moved a bit out of the original state. On the initial load the goal is to set everything wrap all elements within the <body> tags in a <div> with the class container.

If you look between your opening <body> and closing </body> tags you will notice a few elements currently in place, a <header></header>, a <div class="main"> for the content, and a <footer></footer> - each containing child elements of their own.

The task is to put a new div, within the <body> with the class container at the top, ie: <div class="container"> and then after all of the inside elements, but before the closing body tag </body> closing out your div </div>.

Hopefully this clears things up!

Heba Hendy
Heba Hendy
4,823 Points

<!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>