Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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!

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

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

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

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

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

Thank you! It's fixed

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"

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