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 James Stire
James Stire
1,089 Points

Beginner here.. Struggling with container div in "working with grids" exercise

Hello,

I have applied the 'normalize' style sheet to my page and it worked fine. Upon applying the grid style sheet, then adding div "container" to the body of my page, changes are not reflected (content is not centered).

I'm launching in Google Chrome, however, upon opening the index in Firefox, I find the changes HAVE been reflected and the content is centered...

Just started using text wrangler, I'm not sure if there are certain settings need to be adjusted that I'm unaware of.. I've scanned the code in Nick's video multiple times, everything looks correct as I can tell..

Any help greatly appreciated!

James Stire
James Stire
1,089 Points

also tried adding "clearfix".. with no success..

2 Answers

James Stire
James Stire
1,089 Points

SOLVED!

James Stire
James Stire
1,089 Points
James Stire
James Stire
1,089 Points 
<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">
        <h1>Ride the lightning</h1>
        <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>Featured cupcake.</h2>
        <p>This weeks cupcake is the <a href="#">Avocado Chocolate Cupcake</a>. It's very strange.</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, %amp; tasty treats.</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="#">Bakeone@smellslikebakin.com</a></p>
    </div>  

    <p>We announce this stuff through facebook &amp; twitter.</p>
    <a href="http://www.facebook.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; 2013 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
    </div>

</div>