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 Prince Mutimbanyoka
Prince Mutimbanyoka
753 Points

I need your help fellows

How do I deal with this code:

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;
}
Jake Steel
Jake Steel
5,048 Points
Jake Steel
Jake Steel
5,048 Points

It does not look like you have a nav element in your css ye. You must select the nav ul { margin: 0 10px; }

Hope this helps. The 0 is for top and bottom and the 10px defines the left and right, long hand it would be 0 10px 0 10px. The order is top, right, bottom, left.

1 Answer

Manuel Schulze
Manuel Schulze
12,739 Points
Manuel Schulze
Manuel Schulze
12,739 Points

Yes Jake's answer is correct. It says: "Select the unordered list" -> ul {} ... "nested inside the nav element." -> nav ul {} ... "Remove the margins on the top and bottom." -> nav ul { margin: 0; }... "Set the margins on the left and right to 10px." -> nav ul { margin: 0 10px; }

Or in code:

nav ul {
    margin: 0 10px;
}

Remember if there are 2 parameters then the first one is the top and bottom value and the second is used for left and right. With 1 value it takes the same value for all sides and with 4 values it starts on top and going clockwise and each value is connected to one side.

The code above makes the same as:

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