Welcome to the Treehouse Community
Looking to learn something new?
Grid alignment wrong?
In the tutorial of Create a simple website on in the Working with Grids section. When I link the grid.css sheet it definitely links. However when the grid is in margin auto: it does not look anything like it does on the video. It does not center it but just moves it over a tad bit to the right. I can mess around with the margin manually and it moves, so I know it's linked. I've checked my HTML code works but it is screwing the rest of me getting everything else right in the tutorial. I should add that I am not using simple Text but Coda.
Marcus Tisäter4,886 Points
Did you include the normalize.css? It seems like thats what you are talking about in this case. If you have included the normalize css file, what web browser are you using? If you haven't added in the normalize.css file, check if you get the correct allignement you are looking for. Also you should check that you're html has the right classes of the grid system. Link in you're code so I can take a look at it :)
Hey Mark Here is my code. You'll notice my link references are a little off due to placement in the folders I have them is all.
<!DOCTYPE html> <html> <head> <meta hhtp-equiv="Content-Type" content="text/html" charset=utf 8"/> <title> Smells Like Bakin Cupcake Company</title> <link rel= "stylesheet" href= "/Users/jeremyhoutsma/Desktop/websitewaters-island01-stage01 2/css/normalize.css" type="text/css" media="screen"> <link rel= "stylesheet" href= "/Users/jeremyhoutsma/Desktop/websitewaters-island01-stage01 2/css/grid.css" type="text/css" media="screen">
</head> <body> <div class= "container clearfix"> <div class= "grid_4"> <img src="/Users/jeremyhoutsma/Desktop/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= "#"> Locations</a></li> <li class="last"><a href= "#"> Contact Us</a></li> </ul> </div>
<div id="intro" class="grid_9"> <h1> Opposites really do attract, especially in our kitchen!</h1> <p><a href="#" class "btn"> Browse our Cupcakes</a> </p> </div> <div class= "grid_3"> <img src="/Users/jeremyhoutsma/Desktop/img/you-bake-me-blush.gif"" alt= "You Make Me Blush"> </div> <div id="featured-cupcake" class= "grid_7"> <h2> Cupcake of the Week</h2> <p>This week's featured cupcake is the <a href="#"> Avocado Chocolate cupcake</a>.Its strange combo of flavors will kick your taste buds into fiesta mode!</p> <img src="/Users/jeremyhoutsma/Desktop/img/featured-cupcake.jpg" alt="Avacado Chocolat" </div> <div id="new-cupcakes"class="grid_5 omega"> <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="/Users/jeremyhoutsma/Desktop/img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy"> <img src="/Users/jeremyhoutsma/Desktop/img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy"> <h2>Inside the Kitchen</h2> <p> Smells like Bakin' started out in the garage of the husband wife duo Allison & Joseph.</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="#">email@example.com</a> </div> <p> We announce all of our new flavors through Facebook &; twitter and even take requests</p> <a href="http://www.facebook.com/SmellslikeBakin"><img src="/Users/jeremyhoutsma/Desktop/img/facebook.gif" alt="Facebook"></a> <a href="http://www.twitter.com/#!/SmellslikeBakin"><img src="/Users/jeremyhoutsma/Desktop/img/twitter.gif" alt="Twitter"></a> <div id="copyright"> <p>©Copyright Smells Like Bakin', All right's Reserved</p> </div>
James Barnett39,199 Points
You forgot to close your
<img src="/Users/jeremyhoutsma/Desktop/img/featured-cupcake.jpg" alt="Avacado Chocolat"