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

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

Posted by Phumlani Shezi
Phumlani Shezi
Courses Plus Student 540 Points

Bummer! The top padding for nav links should be 15px.

Bummer! The top padding for nav links should be 15px.

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

nav ul {
  margin:0 10px;
  padding:0;
  list-style:none;
}

nav li {
  padding:15px 0px;
  display:inline-block;
  font-weight:800;
}

3 Answers

Andrew Voitsekhovskyy
Andrew Voitsekhovskyy
3,523 Points
Andrew Voitsekhovskyy
Andrew Voitsekhovskyy
3,523 Points

Hi, try to use

nav a {
padding - top: 15px;
}
Dustin Leer
Dustin Leer
21,063 Points
Dustin Leer
Dustin Leer
21,063 Points

Looks like you have some of it correct, but you've combined the 3rd step and the 4th step.

STEP 3
Select the list items inside the nav element and set their display to inline-block.

You wrote:

nav li {
  padding:15px 0px;
  display:inline-block;
  font-weight:800;
}

It's not wrong, but you're adding to it, which it doesn't ask you to do in STEP 4.

It should look like this:

nav li {
  display: inline-block;
}

This is the original question for STEP 4.

STEP 4
Select the links inside the nav element and set their font weight to 800. Then, set padding on the top and bottom to 15 pixels. Set the padding on the left and right to 10 pixels.

You wrote:

nav li {
  padding:15px 0px;
  display:inline-block;
  font-weight:800;
}

It needs to target the links a inside the li, which you're not doing with this CSS structure.

It should look like this:

nav li a {
  font-weight:800;
  padding: 15px 10px;
}

I hope this helps you in understanding the question better. :)

Brendon Attebury
Brendon Attebury
3,866 Points
Brendon Attebury
Brendon Attebury
3,866 Points

I was also very confused by #4. To me it seemed like the question should have asked to target the anchor tag then. So is it just common knowledge to target the anchor instead of the li even though it asks to change the list items?