Welcome to the Treehouse Community
Looking to learn something new?
Working with Grids
I've just got to the working with grids video on the smells like bakin video and I've got my code typed out the same as in the video (as far as I can tell) but the "cupcake of the week" and "Fresh out the oven" section are not aligned next to each other as is the same with "Inside the kitchen" and "Get bakin with us" and the copyright section doesn't seem to be spanning all 12 columns.
Please help, here is my code from index.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 clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div> <div class="grid_8 omega"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Location</a></li> <li class="last"><a href="#">Contact us</a></li> </ul> </div> <div id="intro" class="grid_9"> <h1>Oposites really do attract, especially in our kitchen! We combine unexpected flavours that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse our cupcakes</a></p> </div> <div class="grid_3 omega"> <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush"> </div> <div id="featured-cupcake" class="grid_7"> <h2>Cupcake Of The Week</h2> <p>This weeks featured cupcake is the Avocado chocolate cupcake. It's strange combo of flavours will kick your taste buds into fiesta mode!</p> <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake"> <div id="new cupcakes" class="grid_5 omega"> <h2>Fresh out the oven</h2> <p>Our newest cupcakes are Bakin Me Crazy and Jalepeno So Spicy.</p> <img src="img/new-cupcake-bacon.jpg" alt="Bakin Me Crazy"> <img src="img/new-cupcake-Jalapeno.jpg" alt="Jalapeno So Spicy"> </div> <div class="grid_7"> <h2>Inside The Kitchen</h2> <p>Smells Like Bakin started out in the garage of the husband wife duo Allison & Joseph. Allison is the baker, and Joseph found a way to make a business out of her tasty treats. Flash forward to today & they have a successful store front, catering business and cpcake truck.</p> <p><a href="#" class="btn-small">Read more</a></p> </div> <div class="grid_5 omega"> <h2>Get Bakin With Us</h2> <div id="contact"> <p>Call us:<span> 01472-111222</span><br> Email us: <a href="#">email@example.com</a></p> </div> <p>We announce all of our flavours here through facebook & even take requests for new flavours.</p> <a href="https://www.facebook.com/groups/hullmpm/"><img src="img/facebook.gif" alt="facebook"></a> <a href="https://twitter.com"><img src="img/twitter.gif" alt="twitter"></a> </div> <div id="copyright" class="grid_12"> <p>© Copyright 2013 jamie craven. All rights reserved.</p> </div> </div>
Chris Mitchell12,719 Points
check your code again... there are 2 missing closing tags in your markup, check you featured div section and container.
Try putting all of your code to the left and then indent each piece step by step, it will help you to put your code into order. Also make lots of "comments" <div class="container clearfix"> <!-- start of container -->
<div class"header"> <!-- start of header etc etc etc
</div> <!-- end of container -->
Thanks I think I sorted it now :)