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

Daniel Clarke
Daniel Clarke
3,122 Points
Posted by Daniel Clarke
Daniel Clarke
3,122 Points

Re: Nav Links & General Margin & padding issues

Hi there, I'm struggling a little with this challenge. It is asking me to set the padding within the nav links to 15px for the top and bottom and 10 for the left and right. I'm putting:

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

and it's still telling me it's wrong. I've ale tried altering the code to reflect:

nav li a {etc}

but that isn't working either. I seem to be struggling with the margin and padding coding. Is someone able to assist?

Thanks, Dan

2 Answers

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Ah! The reason it's not working correctly AND the reason that you had to specify each individual margin property is because you're adding commas between your values.

Which it turns out I didn't even catch when I copied and pasted your code into my first answer. I'm sorry about that, Dan.

Try redoing it like this:

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

nav li {
display: inline-block;
}

nav li a {
font-weight: 800;
padding: 15px 10px;
}
Daniel Clarke
Daniel Clarke
3,122 Points
Daniel Clarke
Daniel Clarke
3,122 Points

Hi Kevin, that solved my problem perfectly! Thanks heaps for your help. :)

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey Daniel,

I checked out the code challenge, and I have a couple of ideas as to why it might not be passing.

The first one: if you copied your code exactly from the challenge and pasted it here, you're missing a semi-colon after font-weight: 800.

But if you have that, try moving the font-weight and padding properties to a new element.

Like this:

nav li {
display: inline-block;
}

nav li a {
font-weight: 800;
padding: 15px, 10px; 
}
Daniel Clarke
Daniel Clarke
3,122 Points
Daniel Clarke
Daniel Clarke
3,122 Points

Hi Kevin, thanks for your help!

I'm afraid I'm still not having much luck! While I can't past an actual screen cap of what I'm experience, my code, as directly copied is:

nav ul { list-style: none; margin-top: 0px; margin-left: 10px; margin-right: 10px; margin-bottom: 0px; padding: 0px; }

nav li { display: inline-block; }

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

As you'll see above I struggled with the margins in the previous section of the code challenge, and needed to end up specifying each one. I know that it's most likely user error, but any idea what I might be doing wrong?

Thanks again - Dan