Added the container div to smells like bakin' but it doesn't work.

Question

I just can't see where I have gone wrong any help would be appreciated.

<!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/class" media="screen">
</head>
<body>
  <div class="container clearfix">
      <img src="img/logo.gif" alt="Smells Like Bakin">
      <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
      </ul>
      <div id="intro">
        <hl>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</hl>
        <p><a href="#" 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="#">Avacado Chocolate cupcake</a>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p>
      <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake"
    </div>

    <div>
      <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 hve 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.faebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt=Facebook"></a>
     <a href=http://www.twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="Twitter"><a/>

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

  </div>

</body>
</html>

Answer 1 · 2014-01-02T20:21:51Z

January 2, 2014 8:21pm

What is it doing/not doing? Just glancing at the code I see some typos,

<p><a href="#" class"btn">Browse Our Cupcakes</a></p> ---------------- is missing = between class and " <p><a href="#" class"btn-small">Read More</a></p> ----------------------- also missing =

Answer 2 · 2014-01-02T20:25:01Z

January 2, 2014 8:25pm

it is supposed to center the page and give it equal borders on all sides but it isn't doing that

Answer 3 · 2014-01-02T20:28:44Z

January 2, 2014 8:28pm

check your code in grid.css container should have width of 1000px and margin should be set to auto.

Answer 4 · 2014-01-02T20:31:54Z

January 2, 2014 8:31pm

yeah that is what is written, also this part of the code, in sublimetext 2 is all in yellow which I think means something isn't right but I can't see what it is.

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

  </div>

</body>
</html>

Answer 5 · 2014-01-02T20:36:47Z

January 2, 2014 8:36pm

that code looks fine, double check the fine details I sometimes pull my hair out trying to fix something that was just a missing ; or '. Post your grid.css

Answer 6 · 2014-01-02T20:38:39Z

January 2, 2014 8:38pm

missing closing bracket in Avocado Cupcake img tag

Answer 7 · 2014-01-02T20:39:23Z

January 2, 2014 8:39pm

here it is

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

I appreciate you taking the time to help, I'm so lost atm lol.

Answer 8 · 2014-01-02T20:39:41Z

January 2, 2014 8:39pm

also issue with copyright section is from right before it, you have <a/> not </a> closing the twitter link

Answer 9 · 2014-01-02T20:41:37Z

January 2, 2014 8:41pm

also missing a bunch of " in the facebook and twitter lines

Answer 10 · 2014-01-02T20:46:03Z

January 2, 2014 8:46pm

     <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
     <a href="http://www.faebook.com/SmellsLikeBakin">"img src="img/facebook.gif" alt=Facebook"></a>
     <a href="http://www.twitter.com/#!/smellslikebakin">"img src="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>

ok edited that, and the code looks fine now (all the right colours) but the webpage is still not displaying how it is supposed to... hmmm

Answer 11 · 2014-01-02T20:52:40Z

January 2, 2014 8:52pm

that code still has typo's :

next to img tag you have " instead of <
alt=Facebook" is missing open "

fix those and then repost your index.html and style.css files and ill load them up on my pc. and try and find the issue

Answer 12 · 2014-01-02T20:56:31Z

January 2, 2014 8:56pm

<!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/class" 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 &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
      </ul>
      <div id="intro">
        <hl>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</hl>
        <p><a href="#" 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="#">Avacado Chocolate cupcake</a>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p>
      <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
    </div>

    <div>
      <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 hve 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.faebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
     <a href="http://www.twitter.com/#!/smellslikebakin"><img src="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>

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

there ya go, should be no typos left. You are a diamond for helping thanks dude!

Answer 13 · 2014-01-02T21:00:38Z

January 2, 2014 9:00pm

how about style.css too

Answer 14 · 2014-01-02T21:00:52Z

January 2, 2014 9:00pm

You've got a lot of invalid markup there, probably due to typos.

I noticed 3 types of issues:

Elements missing their closing tags
Attributes missing their = sign
Attributes missing their closing quotes "

Run your code through http://validator.w3.org/nu/ once you fix all of the issues you should be good to go.

Answer 15 · 2014-01-02T21:04:46Z

January 2, 2014 9:04pm

Sometimes it helps to run the code through a validator like: http://validator.w3.org/#validate_by_input it will output on all the errors, there are still more the on line 53 your a/ is wrong, use /a

Edit: Yeah, what James said. :D

Answer 16 · 2014-01-02T21:09:29Z

January 2, 2014 9:09pm

the error is in your grid.css link you have type="text/class" instead of "text/css"

Answer 17 · 2014-01-02T21:10:33Z

January 2, 2014 9:10pm

ok I ran it through the validator and fixed the errors, but still not getting the desired result. What else could it be? I'm going nuts here heh :D

Answer 18 · 2014-01-02T21:12:47Z

January 2, 2014 9:12pm

works fine on my pc once class was replaced with css

Answer 19 · 2014-01-02T21:13:07Z

January 2, 2014 9:13pm

YOU BEAUTY!!!! Thanks so much Rob and everyone else. It is working now. Still a long way to go before I master this web design malarky.

Thanks again everyone for the help. :D

Answer 20 · 2014-01-02T21:16:01Z

January 2, 2014 9:16pm

No problem. I am terrible at typing so one thing I do to help prevent typos is constantly saving file and refreshing the browser, this helps narrowing down the error.

Welcome to the Treehouse Community

Looking to learn something new?

Warren Fairbairn

Warren Fairbairn

Added the container div to smells like bakin' but it doesn't work.

20 Answers

Robert O'Connor

Robert O'Connor

Warren Fairbairn

Warren Fairbairn

Robert O'Connor

Robert O'Connor

Warren Fairbairn

Warren Fairbairn

Robert O'Connor

Robert O'Connor

Robert O'Connor

Robert O'Connor

Warren Fairbairn

Warren Fairbairn

Robert O'Connor

Robert O'Connor

Robert O'Connor

Robert O'Connor

Warren Fairbairn

Warren Fairbairn

Robert O'Connor

Robert O'Connor

Warren Fairbairn

Warren Fairbairn

James Barnett

James Barnett

Robert O'Connor

Robert O'Connor

James Barnett

James Barnett

William Whitworth

William Whitworth

Robert O'Connor

Robert O'Connor

William Whitworth

William Whitworth

Warren Fairbairn

Warren Fairbairn

Robert O'Connor

Robert O'Connor

Warren Fairbairn

Warren Fairbairn

Robert O'Connor

Robert O'Connor