Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Styling Web Pages and Navigation Create a Horizontal List of Links

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

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;

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,210 Points
margin: 10px 0;

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

Where do I put it in the code?

John Lukacs
John Lukacs
26,210 Points

Where ever you want to apply it to.

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,210 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.