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 Customizing Colors and Fonts Use Color in CSS

Andreas Rolfsvåg
Andreas Rolfsvåg
2,389 Points
Posted by Andreas Rolfsvåg
Andreas Rolfsvåg
2,389 Points

Gap Between Header and Navigation Bar

Hello!

If you check out the code here: http//:cdpn.io/oXJEjq you'll see that there is gap between the header and and the nav bar.

Why?

I've been wrestling with it for hours and I just can't figure it out. I've been following Nicks code exactly and his nav bar and header are tightly put together.

I realize that the H1 and H2 in the header have some bottom margin that might push it down, and that the unordered list it has som top margin too. Is it the normalize.css that doesn't work for som reason?

I would greatly appreciate any answer, because I'm on the brink of throwing my mac out the window. (:

3 Answers

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

My first guess would be that the header 3 element padding or margins may be causing the extra whitespace. Try adding the following and see if that eliminates the issue you're seeing.

h3 {
  margin: 0 0 1em 0;
}
highlandcow
highlandcow
7,352 Points
highlandcow
highlandcow
7,352 Points

Remove the margins from h1 and h2. Add a new rule to remove the margins from nav ul. That should do it.