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 Build Navigation with Unordered Lists

Posted by Alec Chan
Alec Chan
172 Points

Unnecessary white space about main header title

Basically, going through the CSS course: Build Navigation with Unordered Lists section; video, it teaches you how to fix the white space at the very top of the page with the code:

/*******************
HEADING
*******************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

This works for pages: Home and about except for the contacts page which is interesting... Does anybody know a fix?

I will appreciate any answer!

Thanks!

Mike Fondario
Mike Fondario
11,286 Points

The only thing I can think of is to play around with the padding and see how it affects the other pages.

2 Answers

Jake Rorrer
Jake Rorrer
17,788 Points

Do you have any other css code on your contacts page? Css stands for cascading style sheets because that is basically how it works. Code towards the bottom of your css will take precedence over code towards the top because of the "cascading" aspect of css. It also takes into account specificity, so a more specific selector like... header li { }... would take precedence over something less specific like just... header { }

As for your padding and margin the four values correspond to top, right, bottom and left respectively. So you have 30px margin on the bottom of your header and 5px of padding on top. If you were to change the padding of your header anywhere else on the page for example something like this:

header li {
    padding: 0;
}

That would remove the padding from all your header's list items.

Mike Fondario
Mike Fondario
11,286 Points

Great answer.

CJ Jugarap
CJ Jugarap
2,517 Points
CJ Jugarap
CJ Jugarap
2,517 Points

I had a similar issue and tried a few different solutions such as setting -15px and -20px to the top of the margin, but I realized that the problem was that I had a few errors throughout my code such as double :: after some of my properties and forgetting ; after some of my values. Once I 'cleaned' up my code the white space was gone.