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

Molly Christison
Molly Christison
4,882 Points
Posted by Molly Christison
Molly Christison
4,882 Points

Messed up header

I can't seem to get rid of the white bar at the very top of ONLY my "about" page. If someone could help me trouble shoot the problem I would be very grateful.

Marcus Quarles
Marcus Quarles
14,598 Points
Marcus Quarles
Marcus Quarles
14,598 Points

Hi Molly,

It seems like you have some margin that the browser has set by default. Try adding a universal selector CSS reset rule in your stylesheet like this..

  • { margin: 0; padding: 0; }

The universal (asterisk) selector rule effects the entire styling of your page.

2 Answers

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hi Molly,

This took a lot of digging, but it turns out the problem is with your h3 element on your About page - nothing at all to do with your Header. For some reason your h3 element is hugely tall... If anyone knows why this would be the case, please chime in!

I compared your code to mine (I went through the same course and my site is at www.gregkaleka.com), and noticed you don't have any css targeting h3.

I added this rule, which is in my main.css code but not yours:

main.css 
h3 {
  margin: 0 0 1em 0;
}

Should fix you up :).

Mark Leonard
Mark Leonard
7,428 Points
Mark Leonard
Mark Leonard
7,428 Points

I'm no expert at this kind of thing. But after toying around with it, I saw that this page was the only one with a section without an id. When I set it to the primary ID that worked. One of the comments is probably a better fix, and you should probably look into the "primary" id css in responsive.css to see why this is happening.

        <div id="wrapper">
            <section id="primary">