Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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,019 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

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">