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

HTML How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Josh Jones
Josh Jones
2,894 Points
Posted by Josh Jones
Josh Jones
2,894 Points

I have a white space above the header that I can't get rid of.

What am I doing wrong that this whit space above the heading is appearing? Here is a snapshot: http://w.trhou.se/wywg67xl41

5 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

It is in your header element you need to at 5px to the top of the padding. This will push the box up and give you more space around the content.

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

Also, you have a weird tick mark that is causing you some grief too. It is next to the <link> in your head area.

Josh Jones
Josh Jones
2,894 Points
Josh Jones
Josh Jones
2,894 Points

Great! Thanks for that. Didn't even notice the tick mark, but it definitely helped removing it.

M W
M W
3,446 Points
M W
M W
3,446 Points

cant see the code anymore but would setting the css with this work? [insert an asterix before the curly bracket. Wont allow me to type one for some reason!!]

'Asterix here!'{ margin: 0; padding 0; } work too? I've had lots of issues myself with gaps appearing at the top of pages and the answers I seemed to come across regularly was use some sort of CSS Reset. So for me I just do a simple one using the universal selector "*" and remove browser preset margins and padding.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I think in this case it was because of the tick mark he had. If it hadn't been there the code would have worked as it was. I just used the info that the video had an moved the padding on the top to 5px so that the header text wasn't so close to the top of the page.

You can use the CSS Reset however, I think that each situation is unique in doing so. Reset will mean you have to code everything out, there is no standard set versus normalize which will give you a basic beginning and make things a bit more uniformed. You still need to set your own styles but thus far my preference has been normalize.

The only thing I have done in addition to that is I like to set the universal marker to border-box

*
*:before
*:after {
      box-sizing: border-box;
}

so that I get the consistency with all tags.

M W
M W
3,446 Points
M W
M W
3,446 Points

Yes I see what you mean. I think working on the exercises within Treehouse then issues like resets should'nt be required. When I'm working outside of here I have been getting many due to browser resets. The padding and margin zeroing that i mentioned has been useful for me (though maybe setting them just to body and h1 would be enough )

:)

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I set a default just like you are suggesting on tags for my portfolio site and, changed them as I needed to on any given page. So if you have a default of 

body {
  margin: 0;
  padding: 0;
}

you can always go and add an ID or class to the body or better yet to the page wrapper and then use child selectors to make changes to the body or h1 tags as needed.

M W
M W
3,446 Points
M W
M W
3,446 Points

Oh I just realised this was'nt your original question! lol....that's why I sent the link for you! Well that article is interesting anyway :)