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

Grid Problems

When laying down my <div> tags I can't get the page to lay down the format like the video. It did indent from the page, however nothing else seem to work.

<!DOCTYPE HTML>
<html>
 <head>
   <meta http-equiv="content-type="text/html; charset=utf-8"/>
   <title>Smells Like Bakin' Piggy Barn</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">
  <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
 </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="#">Bacon Soap</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>Oppistes 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">
        <img src="img/you-bake-me-blush.jpg" alt="You Bake Me Blush"
      </div>

      <div id="featured-Cupcakes" class="grid_7">
       <h2>Cupcake of the Week</h2>
       <p>This week's featured cupcake is the <a href="#">Avcado Chocalte cupcake</a> It's strange combo of flavors will kick your taste buds into fiesta mode!</p>
      <img src="img/featured-cupcake.jpg" alt="Avacodo Chocalte cupcake">
     </div>

     <div id="new-cupcakes" class="grid_5 omega">
      <h2>Fresh Out of 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>
      <div class="grid_7">

       <h2>Inside the kitchen</h2>
        <p>eating turkey bacon is just as good as pork &amp; bacon</p> 
        <p><a href="#" class"btn-small">read more</a></p>
     </div>
       <div class="grid_5">
         <h2>Get Bacon with us!</h2>

        <div id="contact us">
          <p> Call us: <span>1800-bakin-us</span><br>
            Eamil us: <a href="#">bakinus@porky.com</a></p>
      <div class="grid_12">
        <p>&copy; 2013 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
      </div>  
    </div>
  </body>
</html>

Which text editor are you using?

3 Answers

You've got a few errors with your HTML markup according to the W3C's HTML nu validator.

If fixed the errors. But still nada. Would it be best to start over?

I am using sublime text

robert ramirez -

I fixed the errors. But still nada. Would it be best to start over?

No, once you've got valid HTML it's good and your the issue lies elsewhere.

Almost certainly the issue is with the file path specified in <link> for your CSS. Here's a quick primer on file paths that should get you going.

Thanks for your help, much appreciated!