CSS isn't centering properly.

Question

In "working with grids", at about 2-4 minutes, Nick talks about the web page's margins changing making the webpage center. My code isn't doing that neither is it responding to the grids when I type something like "<div class="grid_(#)">".

Answer 1 · 2013-10-24T02:26:45Z

October 24, 2013 2:26am

I SEE THE PROBLEM! You misspelled stylesheet! Correct both of those instances and your css will be applied.

Example:

<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">

and not:

    link rel="sylesheet" href="css/normalize.css" type="text/css" media="screen"
    link rel="sylesheet" href="css/grid.css" type="text/css" media="screen"

If that solved your problem, please click "Best Answer"

Answer 2 · 2013-10-24T00:12:40Z

October 24, 2013 12:12am

Can you post your code? It makes it a lot easier to help you troubleshoot when we can see what you are doing :)

Answer 3 · 2013-10-24T00:16:27Z

October 24, 2013 12:16am

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="sylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="sylesheet" href="css/grid.css" type="text/css" media="screen"> </head> </head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div> <ul class="nav"> <li><a href="g">About</a></li> <li><a href="g">Cupcakes & Prices</a></li> <li><a href="g">Locations</a></li> <li class="last"><a href="g">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="g" class="btn">Browse our Cupcakes</a></p> </div>

<img src="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>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p> <img src="img/featured-cupcake.jpg" alt="Avacado Chocolate Cupcake"> </div>

<div id="new-cupcakes"> <h2>Fresh out of the oven</h2> <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicey</a>. </p> <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy"> <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy"> </div>

<h2>Inside the Kitchen</h2> <p>Smells Like Bakin' started in the garage of the husband/wife duo, Allison & 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 storefront, 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: 1-555-CUP-CAKE<br> Email us: <a href="#">bakeon@smellslikebakin.com</a></p> </div>

<p>We announce all of our new flavours first through Facebook & and even take requests!</p> <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt"Facebook"></a> <a href="https://www.twitter.com/#!/smellslikebakin" title="Twitter"><img src="img/twitter.gif" alt"Twitter"></a>

</body> </html>

Answer 4 · 2013-10-24T00:17:21Z

October 24, 2013 12:17am

How to post it?

Answer 5 · 2013-10-24T00:22:10Z

October 24, 2013 12:22am

` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="sylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="sylesheet" href="css/grid.css" type="text/css" media="screen"> </head> </head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div> <ul class="nav"> <li><a href="g">About</a></li> <li><a href="g">Cupcakes & Prices</a></li> <li><a href="g">Locations</a></li> <li class="last"><a href="g">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="g" class="btn">Browse our Cupcakes</a></p> </div>

<img src="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>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p> <img src="img/featured-cupcake.jpg" alt="Avacado Chocolate Cupcake"> </div>

<div id="new-cupcakes"> <h2>Fresh out of the oven</h2> <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicey</a>. </p> <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy"> <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy"> </div>

<h2>Inside the Kitchen</h2> <p>Smells Like Bakin' started in the garage of the husband/wife duo, Allison & 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 storefront, 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: 1-555-CUP-CAKE<br> Email us: <a href="#">bakeon@smellslikebakin.com</a></p> </div>

<p>We announce all of our new flavours first through Facebook & and even take requests!</p> <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt"Facebook"></a> <a href="https://www.twitter.com/#!/smellslikebakin" title="Twitter"><img src="img/twitter.gif" alt"Twitter"></a>

</body> </html> `

Answer 6 · 2013-10-24T00:22:46Z

October 24, 2013 12:22am

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcake Company</title>
  <link rel="sylesheet" href="css/normalize.css" type="text/css" media="screen">
  <link rel="sylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
</head>
<body>
  <div class="container clearfix">
    <div class="grid_4">
      <img src="img/logo.gif" alt="Smells Like Bakin">
    </div>
    <ul class="nav">
      <li><a href="g">About</a></li>
      <li><a href="g">Cupcakes &amp; Prices</a></li>
      <li><a href="g">Locations</a></li>
      <li class="last"><a href="g">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="g" class="btn">Browse our Cupcakes</a></p>
  </div>

  <img src="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>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p>
  <img src="img/featured-cupcake.jpg" alt="Avacado Chocolate Cupcake">
  </div>

  <div id="new-cupcakes">
  <h2>Fresh out of the oven</h2>
  <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicey</a>. </p>
  <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
  <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
  </div>

  <h2>Inside the Kitchen</h2>
  <p>Smells Like Bakin' started 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 storefront, 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: 1-555-CUP-CAKE<br>
  Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
  </div>


  <p>We announce all of our new flavours first through Facebook &amp; and even take requests!</p>
  <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt"Facebook"></a>
  <a href="https://www.twitter.com/#!/smellslikebakin" title="Twitter"><img src="img/twitter.gif" alt"Twitter"></a>

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

 </body>
</html>

Answer 7 · 2013-10-24T00:27:00Z

October 24, 2013 12:27am

you need to close your img tag:

<img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush"

Answer 8 · 2013-10-24T00:30:33Z

October 24, 2013 12:30am

Although it is still not formatting correctly.

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcake Company</title>
  <link rel="sylesheet" href="css/normalize.css" type="text/css" media="screen">
  <link rel="sylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
</head>
<body>
  <div class="container clearfix">
    <div class="grid_4">
      <img src="img/logo.gif" alt="Smells Like Bakin">
    </div>
    <ul class="nav">
      <li><a href="g">About</a></li>
      <li><a href="g">Cupcakes &amp; Prices</a></li>
      <li><a href="g">Locations</a></li>
      <li class="last"><a href="g">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="g" class="btn">Browse our Cupcakes</a></p>
  </div>

  <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">s

  <div id="featured-cupcake">
  <h2>Cupcake of the Week</h2>
  <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p>
  <img src="img/featured-cupcake.jpg" alt="Avacado Chocolate Cupcake">
  </div>

  <div id="new-cupcakes">
  <h2>Fresh out of the oven</h2>
  <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicey</a>. </p>
  <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
  <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
  </div>

  <h2>Inside the Kitchen</h2>
  <p>Smells Like Bakin' started 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 storefront, 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: 1-555-CUP-CAKE<br>
  Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
  </div>


  <p>We announce all of our new flavours first through Facebook &amp; and even take requests!</p>
  <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt"Facebook"></a>
  <a href="https://www.twitter.com/#!/smellslikebakin" title="Twitter"><img src="img/twitter.gif" alt"Twitter"></a>

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

 </body>
</html>

Answer 9 · 2013-10-24T00:32:57Z

October 24, 2013 12:32am

Can I see the CSS you are using?

Answer 10 · 2013-10-24T00:33:46Z

October 24, 2013 12:33am

/*
 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;
}



.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

Answer 11 · 2013-10-24T00:35:08Z

October 24, 2013 12:35am

It's not resizing because your CSS file is still px based and not % based so it is still at a fixed width

Answer 12 · 2013-10-24T00:42:21Z

October 24, 2013 12:42am

What do you mean?

Answer 13 · 2013-10-24T01:07:20Z

October 24, 2013 1:07am

Alright, I just tried that and it didn't seem to work, I think the grid.css isn't connecting to the html. By the way, thanks for all of your help so far! You respond quickly and know what you're doing!

Answer 14 · 2013-10-24T01:29:03Z

October 24, 2013 1:29am

I think you have to add the classes from grid.css to your HTML (I believe it shows you how to do this in the videos for the project).

An Example would be,

<div class="grid_5" id="featured-cupcake">
<h2>Cupcake of the Week</h2> 
<p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. 
Its strange     combo of flavors will kick your taste buds into fiesta mode!</p>

If I solved your problem, please click "Best Answer"

<img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">

</div>

Answer 15 · 2013-10-24T01:37:43Z

October 24, 2013 1:37am

For some reason, this isn't working either.

Answer 16 · 2013-10-24T01:38:05Z

October 24, 2013 1:38am

Would you like to see the entire file?

Answer 17 · 2013-10-24T01:48:57Z

October 24, 2013 1:48am

How do I upload a file?

Answer 18 · 2013-10-24T02:04:15Z

October 24, 2013 2:04am

Are you sure you added grid.css into a separate folder called 'css' with your normalize stylesheet. Also, did you try downloading and unzipping the project files. Then try running .index into your browser to see if it is just you. Also, what browser are you using?

Answer 19 · 2013-10-24T02:06:51Z

October 24, 2013 2:06am

To add on to all that:

Make sure you don't have index included into the directory with your CSS. It should look like this:

What your code should look like

Answer 20 · 2013-10-24T02:12:10Z

October 24, 2013 2:12am

I sent the email. Are you saying the html doc shouldn't be named index?

Welcome to the Treehouse Community

Looking to learn something new?

Jeremy Bobbin

Jeremy Bobbin

CSS isn't centering properly.

20 Answers

Steven Prescott

Steven Prescott

Shawn Denham

Shawn Denham

Jeremy Bobbin

Jeremy Bobbin

Jeremy Bobbin

Jeremy Bobbin

Shawn Denham

Shawn Denham

Jeremy Bobbin

Jeremy Bobbin

Jeremy Bobbin

Jeremy Bobbin

Shawn Denham

Shawn Denham

Jeremy Bobbin

Jeremy Bobbin

Shawn Denham

Shawn Denham

Jeremy Bobbin

Jeremy Bobbin

Shawn Denham

Shawn Denham

Jeremy Bobbin

Jeremy Bobbin

Shawn Denham

Shawn Denham

Jeremy Bobbin

Jeremy Bobbin

Steven Prescott

Steven Prescott

Jeremy Bobbin

Jeremy Bobbin

Jeremy Bobbin

Jeremy Bobbin

Shawn Denham

Shawn Denham

Steven Prescott

Steven Prescott

Jeremy Bobbin

Jeremy Bobbin

Steven Prescott

Steven Prescott

Steven Prescott

Steven Prescott

Steven Prescott

Steven Prescott

Jeremy Bobbin

Jeremy Bobbin