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!

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

alborz
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
alborz
Full Stack JavaScript Techdegree Graduate 30,884 Points
Posted by alborz
.a{fill-rule:evenodd;}techdegree seal-36
alborz
Full Stack JavaScript Techdegree Graduate 30,884 Points

Need help with my header on the Contact page (Front End Web Development stage 7)

So I'm on stage 7 of Front End Web Development, and when I navigate to my Contact page, the top of the page displays a small gap (showing white space). However, on my Portfolio and About pages, this is not the case (the background is full and there is no gap exposing white space). I originally thought that this has something to do with the styling on my header, but I can't seem to pinpoint the exact issue.

Here's my code below for the heading:

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

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px, 0;
  font-size: 1.75m;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

Thanks in advance!

Allen-Michael Grobelny
Allen-Michael Grobelny
20,851 Points
Allen-Michael Grobelny
Allen-Michael Grobelny
20,851 Points

You should try clearing the next HTML element after the header since the header is floated. The CSS would be "clear: both;"

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Allen-Michael Grobelny ,

You should repost this as an answer so Alborz has the option of marking it "Best Answer"

2 Answers

Allen-Michael Grobelny
Allen-Michael Grobelny
20,851 Points
Allen-Michael Grobelny
Allen-Michael Grobelny
20,851 Points

You should try clearing the next HTML element after the header since the header is floated. The CSS would be "clear: both;"

Repost for best answer on Jason Anello's suggestion!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi,

Have you added content to your contact page and used any margins that could of effected it.