Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Styling Web Pages and Navigation Create a Horizontal List of Links

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

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

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

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

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