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 Matthew King
Matthew King
2,477 Points

Trouble setting padding-top to 15 pixels.

The challenge is to select the links inside nav element, and set the top padding to 15 pixels. This is what I've written:

nav li { display: inline-block; font-weight: 800; padding-top: 15px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; }

can't figure out why it won't except this.

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-top: 0px;
    margin-bottom: 0px;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0px;
    list-style: none;
}

nav li {
  display: inline-block;
  font-weight: 800;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

If you are targeting links inside the nav then you'll want to do the following.

nav li a {
padding-top: 15px;
}

<!-- or --> 

nav a {
padding-top: 15px;
}
Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

Shouldn't you do as asked and select the links inside the nav element: nav a { color: #fff; } add the padding so it reads as follows: nav a { color: #fff; padding-top: 15px; }