My page doesn't look like the example...

Question

My list is showing all the way over to the right, and my list isn't becoming horizontal, even after I do the code on my style.css doc., Can someone please assist me...I'm typing in the exact code that he is....

Answer 1 · 2014-03-06T21:10:42Z

March 6, 2014 9:10pm

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcake Company</title>
  <link rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage4/css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage4/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="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage4/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 &amp; 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! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>
      <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
    </div>
    <div class="grid_3 omega">
      <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage4/img/you-bake-me-blush.gif" alt="You Bake 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="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage4/img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
    </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="#">Jalapeño So Spicy</a>. </p>
      <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage4/img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
      <img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage4/img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
    </div>


    <div class="grid_7">
      <h2>Inside the Kitchen</h2>
      <p>Smells 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>

    <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>
      </div>


      <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="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage4/img/facebook.gif" alt="Facebook"></a>
      <a href="https://twitter.com/#!/smellslikebakin"><img src="http://treehouse-code-samples.s3.amazonaws.com/WWIsland1/stage4/img/twitter.gif" alt="Twitter"></a>
    </div>

    <div id="copyright" class="grid_12">
      <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
    </div>

  </div>
</body>
</html>

Answer 2 · 2014-03-06T21:20:15Z

March 6, 2014 9:20pm

Shadiya,

Are you downloading the Project Files? Look to the right and down a little. Are you copying and pasting the code here; some of the code is incomplete.

Jeff

Answer 3 · 2014-03-06T20:15:35Z

March 6, 2014 8:15pm

body{ font-family: 'Nunito', sans-serif; color:#FAF3BC; background: #420600 url('img/bg-texture.jpg') repeat; }

a { color: #4FB69F; text-decoration: none; } h1{ font-size: 1.750em; letter-spacing: -1.5px; }

h2{ font-size:1.500em; color: #B4C34F; }

.btn { color: #FAF3BC; background: #4FB69F url('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }

.btn:hover{ background-color: #4CC4A7; }

ul.nav { margin: 120px 0 0 0; list-style: none; float: right; }

ul.nav li { float: left; margin-right: 40px; }

Answer 4 · 2014-03-06T20:17:28Z

March 6, 2014 8:17pm

This is just from the style,css, do you need my index.html also?

Answer 5 · 2014-03-06T21:01:53Z

March 6, 2014 9:01pm

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type"

content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake

Company</title>

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'> <link rel="stylesheet" href="css/style.css"

type="text/css" media="screen">

</head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div>

<div class="grid_5 omega"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes &amp 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 in our kitchen!

We combine unexpected flavors that melt together to

create ironically delicious desserts</h1> <p><a href="#" class="btn">Browse Our

Cupcakes</a></p> </div>

<div class="grid_3 omega"> <img src="img/you-bake-me-blush.gif" atl="You Bake Me

Blush"> </div>

<div id="featured-cupcake" class="grid_7"> <h2>Cupcake of the Week</h2> <p>This week's featured cupcake is the

<ahref="#>Avocado Chocolate cupcake</a>. Its strange

combo of flavors will kick your taste buds into fiesta

mode!</p> <img src="img/featured-cupcake.jpg" alt"Avocado

Chocolate Cupcake> </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="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> Smells like Bakin' started out in the garage

of the husband and wife duo Allison & 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>

<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> </div>

<p>We anounce all of our new flavors first through

Facebook & Twitter, and even take request!</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> </div>

</div> </body> </html>

Welcome to the Treehouse Community

Looking to learn something new?

Shadiya Marshall-Sessoms

Shadiya Marshall-Sessoms

My page doesn't look like the example...

Jeff Busch

Jeff Busch

5 Answers

Matt Morris

Matt Morris

Jeff Busch

Jeff Busch

Shadiya Marshall-Sessoms

Shadiya Marshall-Sessoms

Shadiya Marshall-Sessoms

Shadiya Marshall-Sessoms

Shadiya Marshall-Sessoms

Shadiya Marshall-Sessoms

Matt Morris

Matt Morris

Shadiya Marshall-Sessoms

Shadiya Marshall-Sessoms

Matt Morris

Matt Morris