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 Structure

I'm really stumped on this one! I've checked my code against the html file in the folder & it all seems to match. I cannot get the sections for featured cupcakes and new cupcakes to flow next to each other. Same with inside the kitchen and get baking with us. Something is blocking the omega divs from moving into their proper positions. Any help would really be appreciated.

<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>. It's a strange combo of flavors that will knock your taste buds into a fiesta mode!</p>
        <img src="img/featured-cupcake.jpg" alt="Our Avocado Chocolate cupcake"

    <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 class="grid_7">
      <h2>Inside the Kitchen</h2>
      <p>Smell's Like Bakin' started out in the garage of the husband-wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
      <p><a href="#" class="btn-small">Read More</a></p>

    <div class="grid_5 omega">
      <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></p>

        <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
        <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
         <a href="http://www.twitter.com/#!/SmellsLikeBakin"><img src="img/twitter.gif" alt="Twitter"></a>

7 Answers

James Barnett
James Barnett
39,199 Points

@Deborah - Ahh, the styles.css file is added in a later stage.

In your codepen, you forgot a closing bracket it's on line 33 of your codepen.

Change this:

<img src="/img/featured-cupcake.jpg" alt="Our Avocado Chocolate cupcake"

To this:

<img src="/img/featured-cupcake.jpg" alt="Our Avocado Chocolate cupcake">

James Barnett
James Barnett
39,199 Points

@ Deborah -

Create "working" example using codepen so we can see the bigger picture. Remember to include both your HTML & CSS markup.



First time using Codepen. Let me know if you were able to access it. Thanks!

James Barnett
James Barnett
39,199 Points

@Deborah - You pasted in the contents of grid.css what we need instead is style.css.

@James - There is no style.css in this lesson only normalize.css and grid.css. This is the basic Build a Simple Website lesson.


Thanks! That did the trick! I figured it was something simple, I just missed that (too many times)

James Barnett
James Barnett
39,199 Points

@Deborah - You're quite welcome.