CSS won't create margins and center the site

Question

In "Build a simple website", Stage 3 Creating a Website Structure - Working with grids, I am stuck on the part where you use the CSS 'normalize' and 'grid' to center the website with margin: auto; Here is the code I am using:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Smells Like Bakin' Cupcake Company</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
<body>
    <div class="containter clearfix">
        <div class="grid_4">
            <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/logo.gif" alt="Smells Like Bakin">
        </div>

And here is the CSS

 /*
 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 

 */
.grid_1 { width: 65px; }
.grid_2 { width: 150px; }
.grid_3 { width: 235px; }
.grid_4 { width: 320px; }
.grid_5 { width: 405px; }
.grid_6 { width: 490px; }
.grid_7 { width: 575px; }
.grid_8 { width: 660px; }
.grid_9 { width: 745px; }
.grid_10 { width: 830px; }
.grid_11 { width: 915px; }
.grid_12 { width: 1000px; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 20px 10px 0;
    float: left;
    display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    width: 1000px; 
    margin: auto;
}

I have tried using Firefox, Chrome and IE. All with the same results...no margins. Any help would be greatly appreciated.

Answer 1 · 2013-11-15T20:16:09Z

November 15, 2013 8:16pm

Megan Boyd - Your markup won't validate as it's got a few small errors. Go to http://validator.nu/ and paste in your markup, once there are no more errors you should be good to go.

Answer 2 · 2013-11-15T19:23:21Z

November 15, 2013 7:23pm

Is you entire HTML wrapped in a container div?

Answer 3 · 2013-11-15T19:27:26Z

November 15, 2013 7:27pm

Umm, no?

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Smells Like Bakin' Cupcake Company</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
<body>
    <div class="containter clearfix">
        <div class="grid_4">
            <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/logo.gif" alt="Smells Like Bakin">
        </div>
        <ul class="nav">
            <li><a href="a">About</a></li>
            <li><a href="a">Cupcakes &amp; Prices</a></li>
            <li><a href="a">Locations</a></li>
            <li class="last"><a href="a">Contact Us</a></li>
        </ul> 
        <div id="intro">
            <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts. </h1>
            <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
        </div>

        <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/you-bake-me-blush.gif" alt="You Bake Me Blush">

        <div id="featured-cupcake">
            <h2>Cupcake of the Week</h2>
            <p>This week’s featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. It’s strange combo of flavors will kick your taste buds into fiesta mode!</p>
            <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake"
        </div>

        <div id="new cupcakes">
            <h2>Fresh Out the Oven</h2>
            <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeño So Spicy</a>.</p>
            <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">"
            <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
        </div>

        <h2>Inside the Kitchen</h2>
        <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
        <p><a href="#" class"btn-small">Read More</a></p>

        <h2>Get Bakin' with Us</h2>

        <div id="contact">
            <p>Call us: <span>1-555-Cup-Cake</span><br>
            Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
        </div>


        <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
        <a href="http://www.facebook.com/SmellsLikeBakin"><img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/facebook.gif" alt="Facebook""></a>
        <a href="https://twitter.com/#!/smellslikebakin"><img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/twitter.gif" alt="Twitter"></a>

        <div id="copyright">
            <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
        </div>

    </div>

</body>
</html>

Answer 4 · 2013-11-15T19:29:18Z

November 15, 2013 7:29pm

A couple of issues,

You spelled container wrong in your html class, so it won't pick up the CSS. You also did not close the container div. You do not have a clearfix class set up, so the container is collapsing on itself, but it is centered on the page.

I fixed your two errors above, but did not add a clearfix. I did add a blue border to the container, so you can see it. Otherwise, this code is just copy and pasted from what you typed.

http://codepen.io/kevink/pen/zcFaw

Answer 5 · 2013-11-15T22:48:07Z

November 15, 2013 10:48pm

Thanks for the help, guys. It's working properly now, but I have no idea why. I've never been able to get image sources or css references to work using files on my computer, so I always resort to using the same images and css files from an online address provided by treehouse. I tried using this the first go around when I couldn't get the margins to appear properly, then switched to trying to use the css files from my computer (as shown in the above code). I tried the suggestions you had provided, still with no luck. I'm sure this was due to some error or misunderstanding on my part. I tried replacing the css references in the code with the online sources once again and this time it worked and everything appears properly.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Smells Like Bakin' Cupcake Company</title>
  <link rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/css/grid.css" type="text/css" media="screen">
</head>
<body>
    <div class="container clearfix">
        <div class="grid_4">
            <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage3/img/logo.gif" alt="Smells Like Bakin">
        </div>
        <ul class="nav">
            <li><a href="a">About</a></li>
            <li><a href="a">Cupcakes &amp; Prices</a></li>
            <li><a href="a">Locations</a></li>
            <li class="last"><a href="a">Contact Us</a></li>
        </ul> 
        <div id="intro">
            <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts. </h1>
            <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
        </div>

        <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/you-bake-me-blush.gif" alt="You Bake Me Blush">

        <div id="featured-cupcake">
            <h2>Cupcake of the Week</h2>
            <p>This week’s featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. It’s strange combo of flavors will kick your taste buds into fiesta mode!</p>
            <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake"
        </div>

        <div id="new cupcakes">
            <h2>Fresh Out the Oven</h2>
            <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeño So Spicy</a>.</p>
            <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">"
            <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
        </div>

        <h2>Inside the Kitchen</h2>
        <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
        <p><a href="#" class"btn-small">Read More</a></p>

        <h2>Get Bakin' with Us</h2>

        <div id="contact">
            <p>Call us: <span>1-555-Cup-Cake</span><br>
            Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
        </div>


        <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
        <a href="http://www.facebook.com/SmellsLikeBakin"><img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/facebook.gif" alt="Facebook""></a>
        <a href="https://twitter.com/#!/smellslikebakin"><img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage2/img/twitter.gif" alt="Twitter"></a>

        <div id="copyright">
            <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
        </div>

    </div>

</body>
</html>

I'm not sure where the difference was made, but it must be there somewhere. Chalk it up to me being a complete noob and only having the smallest grasp of what I'm doing. But I will try to push through this frustration!

Welcome to the Treehouse Community

Looking to learn something new?

Megan Boyd

Megan Boyd

CSS won't create margins and center the site

Megan Boyd

Megan Boyd

5 Answers

James Barnett

James Barnett

Kevin Korte

Kevin Korte

Megan Boyd

Megan Boyd

Kevin Korte

Kevin Korte

Megan Boyd

Megan Boyd