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

Posted by Filip Diarra
Filip Diarra
6,647 Points

Padding setup doesn't work. Please help. How do I add 15px top/bottom and 10px left/right inside nav li?

I've been asked to add a padding inside nav li {} of 15px on the top/bottom and 10px right/left as well as font weight of 800.

I've written: nav li { font-weight: 800; padding: 15px 10px; }

It says that it's not right, because the top padding is supposed to be 15px. What am I missing here?

Thank you!!

css/main.css 
a {
  text-decoration: none;
}
nav li {
font-weight: 800;
  padding: 15px 10px;
}
#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;
}

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

nav li {
  display: inline-block;
}
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;
}
Kenny Nadel
Kenny Nadel
7,695 Points

It's because you have 2 nav li properties, and the one that you wrote for the padding and font-weight is conflicting with the nav ul property. To fix this problem, remove your top nav li, and place the padding and font-weight inside of the nav li that is near the bottom of your css file. Remember, it's a cascading rule.

2 Answers

Leyton Parker
Leyton Parker
6,556 Points

you have 2 nav list items (the other towards the bottom of your code) the inline-block value may be overriding the padding, try adding the padding/font-weight in the later nav li

Leyton Parker
Leyton Parker
6,556 Points
Leyton Parker
Leyton Parker
6,556 Points

Ah dang, Kenny beat me to it.

Kenny Nadel
Kenny Nadel
7,695 Points

It happens. :)