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

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 Points

Negative margins

Hi.

In my .main-nav li rule, I set the right margin to -4px as Guil did, but this left a very thin gap between the last two list items, "TEA" and "COFFEE".

Here's my snapshot:

http://w.trhou.se/jes9sasxea

I would appreciate any input.

Sean

3 Answers

Don Macarthur
Don Macarthur
28,430 Points

Hi Sean,

I think it's down to the size of the element for the "TEA" li tag. ie as "TEA" is a shorter word than the other links the element is smaller than all the others. So when the text-align: center rule from the main-header tries to align all your li tags there is slightly more of a gap between "TEA" and the li tags either side of it.

I tried changing the negative margin to -6px and it cleared it up no problems.

Hope that helps :-) Don

Andrew Denson
Andrew Denson
4,544 Points
Andrew Denson
Andrew Denson
4,544 Points

Thank you Don for the answer to this question. I spent half hour reading my coding trying to find out why. I think that this should be something that gets updated in the video. I feel like we are not the only two people that have came across this problem.

Don Macarthur
Don Macarthur
28,430 Points

You're welcome Sean :-)