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 Luqman Shah
Luqman Shah
3,016 Points

Right & Left Padding Won't Work

.main-header {
  text-align: center;
  background: #37474f;
}

.main-header li {
  font-size: 20px;
  font-family: 'Titillium Web', sans-serif;
  color: white;
  line-height: 2;
  margin-right: 35px;
  border-top: solid 1px #455a64;

}

I've added subtle top borders on top of each list item, but the borders take up too much width, so obviously the next step you'd do is decrease the left and right padding values, but that doesn't work for some reason, it won't apply the padding values. And it's a block level element, shouldn't it work?

1 Answer

-- --
-- --
12,382 Points
-- --
-- --
12,382 Points

Hi Luqman,

There is no such thing as 'negative padding', which I think is what you tried to apply. Perhaps a solution would be to add the border as an element coming before your list items? That way, you can give it a specific width without affecting the size of the list items.

.main-header li::before { 
  content: "";
  display: block;
  margin: 0 auto;
  border-top: 1px solid #455a64;
  width: 40%; /* set the desired width of the border */
}

.main-header li:first-child::before {
  display: none;
}