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 How to Make a Website Styling Web Pages and Navigation Create a Horizontal List of Links

Posted by Magen Burkhardt
Magen Burkhardt
415 Points

I can't figure out what I'm suppose to do with this step.

I feel like I'm suppose to make the margin look like this: margin 10px 0;

I'm not sure where to put it or even if that's right.

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

4 Answers

Harry Beckwith
Harry Beckwith
13,452 Points
Harry Beckwith
Harry Beckwith
13,452 Points

Try

nav ul li { margin: 0px 10px 0px 10px; }

Using this shorthand starts at the top and works clockwise.

This is just a short hand of

margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 0px;

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

This is close but the challenge is only asking you to select the unordered list within the nav. Not the list items within that.

Also, whenever the top and bottom values are the same and the left/right values are the same then you can specify 2 values for the shorthand.

nav ul {
  margin: 0 10px; /* top and bottom is 0, left and right is 10px */
}

Magen Burkhardt ,

You were on the right track with the 2 values but you had them reversed. As far as where to put the css, generally you add it to the end of the existing css.

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points 
margin: 10px 0;

This would push things away from the top and bottom by ten pixels Not really sure what the question is.

Magen Burkhardt
Magen Burkhardt
415 Points

Where do I put it in the code?

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

Where ever you want to apply it to.

Magen Burkhardt
Magen Burkhardt
415 Points

It's not working.

The directions are: Select the unordered list nested inside the nav element. Remove the margins on the top and bottom. Set margins on the left and right to 10px.

John Lukacs
John Lukacs
26,806 Points
John Lukacs
John Lukacs
26,806 Points

Ok so you want to select the ul li { margin-top:o; margin-bottom: 0; margin-left: 10px; margin-right:10px; } try it with out the nav. you can write shorthand aswell ul li {margin: 0 10px;} if it dosent work try adding commas between the 0 and the 10px; it should work. If that dosent work add the nav back in with the commas.