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

Posted by tracey cataldo
tracey cataldo
481 Points

Grid / Classes

My webpage looks exactly the same as the video... except when getting to the section in Web Design / Working with Grids. When adding the <div class="container"> nothing happens. my page doesn't "center." and no work after that updates either. what am i doing wrong?

7 Answers

Ilja Daderko
Ilja Daderko
8,953 Points
Ilja Daderko
Ilja Daderko
8,953 Points

Can you post some of your code snippets (HTML / CSS) we need to look at those in order to help you out and point out any issues.

tracey cataldo
tracey cataldo
481 Points
tracey cataldo
tracey cataldo
481 Points

<!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="container"> <img src="img/logo.gif" alt="Smells Like Bakin"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contract Us</a></li> </ul> <div id="intro"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt toegether to create ironically delicous desserts.</h1> <p><a href="#" calss="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 weeks featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>.  
    It's a strange combo of flavors that will kick your taste buds into fiesta mode!</p>
    <img src="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="#">Jalapeno so Spicy</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 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="contract">
    <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 and twitter, and even take request!</p>
  <a href="https://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
  <a href="https://www.twitter.com/SmellsLikeBakin"><img src="img/twitter.gif" height="50" alt="Twitter"></a>

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

</div> </body> </html>

eirikvaa
eirikvaa
18,015 Points
eirikvaa
eirikvaa
18,015 Points

The opening tag of your div with the id of new-cupcakes had a forwardslash in it. It should look like this:

<div id="new-cupcakes">
tracey cataldo
tracey cataldo
481 Points
tracey cataldo
tracey cataldo
481 Points

thank you! can't believe i missed that. However, that doesn't seem to fix my "container" issue. Still can't get the page to center. Any other super noticeable mistakes. I can't see to figure it out.

Thank you for your help.

eirikvaa
eirikvaa
18,015 Points

Is the HTML you posted above the whole HTML file you're working on? If not, edit your post to reflect the whole HTML file. Also, post the CSS file. We need these two files to help you out.

tracey cataldo
tracey cataldo
481 Points
tracey cataldo
tracey cataldo
481 Points

Here is the current full HTML file.

```html<!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="container"> <img src="img/logo.gif" alt="Smells Like Bakin"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contract Us</a></li> </ul> <div id="intro"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt toegether to create ironically delicous desserts.</h1> <p><a href="#" calss="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 weeks featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>.  
    It's a strange combo of flavors that will kick your taste buds into fiesta mode!</p>
    <img src="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="#">Jalapeno so Spicy</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 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="contract">
    <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 and twitter, and even take request!</p>
  <a href="https://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
  <a href="https://www.twitter.com/SmellsLikeBakin"><img src="img/twitter.gif" height="50" alt="Twitter"></a>

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

</div> </body> </html>```

tracey cataldo
tracey cataldo
481 Points
tracey cataldo
tracey cataldo
481 Points

for the grid.css & normalize.css, i got both files from the treehouse website.
Grid: 

 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}```
eirikvaa
eirikvaa
18,015 Points

You have some information at the top and it hasn't been commented out properly. Try the following:

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

I also see that the .container rule has a margin property with a value of auto. To center an element you could do this: 

.container {
    margin: 0 auto;
}
tracey cataldo
tracey cataldo
481 Points
tracey cataldo
tracey cataldo
481 Points

.