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!

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 Jeremy Houtsma
Jeremy Houtsma
971 Points

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.

3 Answers

Marcus Tisäter
Marcus Tisäter
4,886 Points
Marcus Tisäter
Marcus Tisäter
4,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 :)

Happy coding!

Jeremy Houtsma
Jeremy Houtsma
971 Points
Jeremy Houtsma
Jeremy Houtsma
971 Points

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 &amp; 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="#">bakeon@smellslikebakin.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>&copy;Copyright Smells Like Bakin', All right's Reserved</p>
</div>

</div>

</body> </html>

Marcus Tisäter
Marcus Tisäter
4,886 Points
Marcus Tisäter
Marcus Tisäter
4,886 Points

Please include eveything between the head tags. the body code looks good, there is nothing wrong with that.

Jeremy Houtsma
Jeremy Houtsma
971 Points

Hey Marcus I keep trying to add in this comment what the text is between the head but it keeps turning it into a regular text comment and not code

Jeremy Houtsma
Jeremy Houtsma
971 Points

This is how I have the css linked between the head

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"

Except I have all the open and close tags but for some reason everytime I do that on here it comes up blank

Marcus Tisäter
Marcus Tisäter
4,886 Points
Marcus Tisäter
Marcus Tisäter
4,886 Points

You need to make sure to set it to right path. It's something messed up with you're path, not you're code.

Jeremy Houtsma
Jeremy Houtsma
971 Points

Thank you! It's fixed

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You forgot to close your img tag.

<img src="/Users/jeremyhoutsma/Desktop/img/featured-cupcake.jpg" alt="Avacado Chocolat"

Jeremy Houtsma
Jeremy Houtsma
971 Points

Thanks James I did that but it still didn't help the margins in the page