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

Cosmin Iuga
Cosmin Iuga
2,352 Points
Posted by Cosmin Iuga
Cosmin Iuga
2,352 Points

Select the unordered list nested inside the nav element. Remove the margins on the top and bottom. Set the margins on th

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

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;
}
Andrew Stelmach
Andrew Stelmach
12,583 Points 
nav ul {
    margin: 0 10px 0 10px;
}

6 Answers

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

Andrew's answer is correct, however any time you're setting top/bottom values equal and/or right/left values equal, you can use that as a shortcut.

/*all margins */

margin: 10px;


/*top&bottom  left&right */

margin: 0px 10px;


/*top, left&right, bottom*/

margin: 0px 10px 0px;


/*top, right, bottom, left */

margin: 0px 10px 0px 10px
Cosmin Iuga
Cosmin Iuga
2,352 Points
Cosmin Iuga
Cosmin Iuga
2,352 Points

Thank you Andrew. I complicate myself to no end... Can't keep things simple...

Cosmin Iuga
Cosmin Iuga
2,352 Points
Cosmin Iuga
Cosmin Iuga
2,352 Points

Thank you Chris. It worked...

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

Tracy, Sorry as I've just seen this answer and hope you've figured it out by now ;).

But for clarity for anyone who reads this:

margin: 0px 10px 0px 10px;

Is equivalent to:

margin: 0px 10px;

Like I posted above, when top and bottom are equal values, they can be represented by the first value, so long as left and right are also the same as each other.

There are many CSS values that follow this rule, such as borders.

In most cases there is a general and specific CSS value; margin vs margin-top, background vs. background-color.

For example, you can represent all background-* values by just calling "background" and defining them in order.

Border is an easy example:

border-width: 1px;
border-style: solid;
border-color: #000;

Is equivalent to:

border: 1px solid #000;

Hope that helps!

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points 
nav ul {
    margin:0 10px;
}
Tracy Nordlund
Tracy Nordlund
2,601 Points
Tracy Nordlund
Tracy Nordlund
2,601 Points

I tried this ^ a couple times and it didn't work. It worked with nav ul { margin: 0 10px 0 10px; }. Do the two behave differently?