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

HTML

Posted by Jonathan Stoppi
Jonathan Stoppi
1,577 Points

Having some difficulty getting the container div part of the grid.css to work.

Hi I think I have all the necessary files in the right place. I'm following along with Nick on his videos using Sublime and viewing my code on Safari. I have gone over my code multiple times, continued on by adding "clear fix" and such, but none of my content is being centred. I have read the other forums relating to this topic and those don't seem to help me either. I hope the code block works and that you will take the time to help me out. Thank you.

[<!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="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">
      <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 = "you-bake-me-blush.gif" alt = "You bake me blush"/>

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

    <img src = "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 = "new-cupcake-bacon.jpg" alt = "Bacon Me Crazy"/>
      <img src = "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 succesful 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 flavours first through Facebook &amp; Twitter, and even take requests!</p>
    <a href="https://www.facebook.com/SmellsLikeBakin"><img src="facebook.gif" alt = "Facebook"/></a>
    <a href="https://twitter.com/smellslikebakin"><img src="twitter.gif" alt = "Twitter"/></a>

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


</div>
 </body

</html>]
Andre' Jones
Andre' Jones
26,671 Points

ending body isnt closed. go thru and make sure everything that open is closed

4 Answers

michaellacy
michaellacy
1,335 Points
michaellacy
michaellacy
1,335 Points

Jonathan the div has not been closed </div>

michaellacy
michaellacy
1,335 Points
michaellacy
michaellacy
1,335 Points

Jonathan:

My last comment may not be clear close your div above the <div id ="copyright"> and below the twitter href it is currently open </div>. I had no trouble with it at all. Just a note make sure all the proper files that require linking are present.

Jonathan Stoppi
Jonathan Stoppi
1,577 Points
Jonathan Stoppi
Jonathan Stoppi
1,577 Points

Yes, sorry about that. I quickly fixed it and I have deleted all the spaces between the quotation marks and the equal signs.

[= "]

Although fixing that still did not help. I have fixed it though, by putting all the css files, the image files and the html document into one folder. Therefore I needed to delete the img folder and the css folder before the image links and the css references.

["img/logo.gif"
"css/normalize.css"]```

So, I have solved it, I just don't understand why I need to put all the files in the same folder in order for them to be linked. Thank you!
Josh Mackrell
PLUS
Josh Mackrell
Courses Plus Student 915 Points
Josh Mackrell
Josh Mackrell
Courses Plus Student 915 Points

I did this same thing and mine still doesn't center or even move to grid???