Navigation wont float right

Question

.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; }

Answer 1 · 2014-02-04T19:37:03Z

February 4, 2014 7:37pm

<div id="nav" class="grid_8 omega"> <ul> <li class="about"><a href="#">About</a></li> <li class="pricing"><a href="#">Cupcakes & Prices</a></li> <li class="locations"><a href="#">Locations</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </div>

Just quickly note in this example you are giving the div an id of 'nav' so when selecting it you must have everything written down as #nav .... not '.nav' which is selecting the class of nav. When you use the HTML5 'nav' selector you can use just 'nav'

Answer 2 · 2014-02-04T18:47:49Z

February 4, 2014 6:47pm

do you have the rest of your code?

Answer 3 · 2014-02-04T18:48:03Z

February 4, 2014 6:48pm

do you have the rest of your code?

Answer 4 · 2014-02-04T18:48:19Z

February 4, 2014 6:48pm

Can you provide the HTML as well?

Answer 5 · 2014-02-04T18:48:32Z

February 4, 2014 6:48pm

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; }

Answer 6 · 2014-02-04T18:49:17Z

February 4, 2014 6:49pm

<!DOCTTYPE 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="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_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! 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" 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 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 wife duo Alison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash foward 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 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 id="copyright" class="grid_12">
  <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
</div>

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

Answer 7 · 2014-02-04T18:52:38Z

February 4, 2014 6:52pm

<!DOCTTYPE 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="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_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! 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" alt="You Bake Me Blush"> </div>

Answer 8 · 2014-02-04T18:55:34Z

February 4, 2014 6:55pm

You dont have any of the UL or LI listed in that code.

To get it to float right, you wanna target the class. so from what I have when I did the "Smells Like Bakin" project, the nav was a class. so you wanna do "#nav ul {float: right;} plus whatever else is in the styles

Answer 9 · 2014-02-04T18:56:49Z

February 4, 2014 6:56pm

```<div id="nav" class="grid_8 omega"> <ul> <li class="about"><a href="#">About</a></li> <li class="pricing"><a href="#">Cupcakes & Prices</a></li> <li class="locations"><a href="#">Locations</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </div>

Answer 10 · 2014-02-04T19:15:59Z

February 4, 2014 7:15pm

Well i did write out a long message which appears to have been deleted...

You have written the selector as ul.nav this is selecting the element with the class of 'nav' not the actual nav or even the element with id of nav. Please try either #nav ul{float:right;} or nav ul{float :right;}

this depends on how your code written out..

Answer 11 · 2014-02-04T19:17:14Z

February 4, 2014 7:17pm

Thanks Matt Trask. Your code wasn't 100% right but sure did help.

<div id="nav" class="grid_8 omega"> <ul class="nav"> <li class="about"><a href="#">About</a></li> <li class="pricing"><a href="#">Cupcakes & Prices</a></li> <li class="locations"><a href="#">Locations</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </div>

Answer 12 · 2014-02-04T19:18:47Z

February 4, 2014 7:18pm

sweet, glad I could help.

Welcome to the Treehouse Community

Looking to learn something new?

Graham Holdren

Graham Holdren

Navigation wont float right

12 Answers

Samuel Johnson

Samuel Johnson

Matt Trask

Matt Trask

Matt Trask

Matt Trask

austenpayan

austenpayan

Graham Holdren

Graham Holdren

austenpayan

austenpayan

Graham Holdren

Graham Holdren

Graham Holdren

Graham Holdren

Matt Trask

Matt Trask

Matt Trask

Matt Trask

Samuel Johnson

Samuel Johnson

Graham Holdren

Graham Holdren

Matt Trask

Matt Trask