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

Robert Moss
Robert Moss
1,797 Points
Posted by Robert Moss
Robert Moss
1,797 Points

Need help with challenge: Set the padding on top/bottom to 15px and left/right to 10px

Hi, I need help with one of the challenge questions. It says to set the padding on the top and bottom to 15 pixels. Then to set the left and right to 10 pixels. I thought the answer was just a simple:

nav { padding: 15px 10px; }

But then it says, " The top padding needs to be 15 pixels." I tried doing each individual side like padding-top: 15px; and padding-left: 10px; and so on, but that doesn't work either.

I would appreciate any advice you have to other!

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 {
  display: inline-block;
  font-weight: 800;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 10px;
  padding-left: 10px;
}

2 Answers

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

Hi Robert, the challenge asks for the links inside the nav element to be changed, not the entire nav. To change the padding of the links inside the nav you do the following:

nav a {
  padding: 15px 10px;
}

you could also do it individually like so:

nav a {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

But as you can see it's much more effective doing it the first way :)

Saskia Lund
Saskia Lund
5,673 Points
Saskia Lund
Saskia Lund
5,673 Points

To which html element do you have to assign the padding to? Are you sure it is nav li?