Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Jonavan Helom
Jonavan Helom
2,593 Points
Posted by Jonavan Helom
Jonavan Helom
2,593 Points

select class 'container'

do you know what it mean by selecting class '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>
    <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>
style.css 
/* Complete the challenge by writing CSS below */
.wrapper (
width: 80%;
margin: center;
)

1 Answer

Joshua Kaufman
Joshua Kaufman
19,193 Points
Joshua Kaufman
Joshua Kaufman
19,193 Points

When you select a class in this case, It's being referenced in the CSS stylesheet. There are a few issues with what you wrote though.

First, in the CSS, you selected ".wrapper", which is not a class in your HTML sheet. Although technically you don't HAVE to include the class in your HTML for it to work, you DO need to modify the class that IS in your HTML. You used the wrapper div called "container", so instead of doing .wrapper in your CSS, replace it with ".container" (without the quotes) so that you are referencing that class which you want to modify.

Once you do that, go ahead and switch your margin property to use "0 auto" instead of "center". Center is more for alignment, where using 0 auto will set the top and bottom margins to 0 while AUTOmatically setting the margins of the left and right to fit the middle of the page.

So once again, reference .container instead of .wrapper in your CSS, then switch the margin to say margin: 0 auto;

Lastly, consider using double quotes in your HTML when you give the class "container" to your Div, for consistency sake. It will help you later on when you need to use things like JavaScript or PHP to modify your HTML.