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

Posted by Mitch Little
Mitch Little
11,870 Points

White bar at top of page - now just on one page!! How do I remove this?

I have had a white bar at the top of the page through the project but after fixing a previous problem it disappeared from all pages except the 'about page.

The white bar disappears when I remove:

<h3>About</h3>
        <p>Hi, I'm Mitch Little! This is my design portfolio where I share all of my favourite work. When I'm not designing things, I enjoy exercising, playing video games, drinking good coffee, and much more.</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/mitchhlittle">@mitchhlittle</a></p>

However when removing an individual header or paragraph, or a combination of two, the white bar remains so I cannot narrow the problem down further.

Any help would be greatly appreciated!

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Mitch,

If it's the "How To Make a Website" project then your problem could be due to the header element being floated.

Since the header was floated but not cleared by any later elements, a top margin on later elements can cause a gap all the way at the top due to how floated elements behave.

So it's a likely a top margin on your h3 that is causing that gap.

The solution I would recommend is to have your wrapper div clear the floated header since this is the element that directly follows the header.

#wrapper {
  clear: both;
}

Add the clear property to your existing styles.

See if that works. If not, you can post a snapshot of your workspace and we can look at it in more detail.