Whitespace above header color

Question

I have white space above the header color when i display in the browser. For example in the how to make a website videos Nick tells us how to fix that. I do just that and it still doesn't fix it for all pages. Two pages are correct at different widths to the browser screen. The code appears to be correct and the fact that at two different sizes there are two separate cases of it working on different pages is what has me confused because it has white space on the other pages. Any thoughts?

Answer 1 · 2014-04-23T05:23:32Z

April 23, 2014 5:23am

Hi Evan, Would you mind sending your code along? It is possible that the CSS selector isn't targeting all of the pages, just some of them, but hard to tell for sure.

Answer 2 · 2014-04-23T05:28:33Z

April 23, 2014 5:28am

what code. both css and html? its quite a lot.

Answer 3 · 2014-04-23T05:29:42Z

April 23, 2014 5:29am

Perhaps just the styling for the header? If I understand correctly, the header white space isn't there for like the Home and About page, but is for the Contact page? Or some variation thereof?

Answer 4 · 2014-04-23T05:34:29Z

April 23, 2014 5:34am

in full browser white space is on the home and about pages. but not on the contact page. when i shrink the browser to the min 480px the about page is fine and other two are screwy.

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

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

h1, h2 {
    font-family: 'Handlee', sans-serif;
    font-weight: 600;
    line-height: 0.8em;
}

h1 {
    margin: 15px 0;
    font-size: 1.75em;
}

h2 {
    font-size: 1em;
    margin: -10px 0 0;
}

h3 {
    font-family: 'Handlee', sans-serif;
    font-size: 1.0em;
    font-weight: 600;
    text-align: center;
    margin: 15px 0 20px 0;  
}

Answer 5 · 2014-04-23T07:32:38Z

April 23, 2014 7:32am

I don't have exact answer to your question, but I have this kind of issue several times.

The tips to handle it is to view it using Chrome Inspect Element feature (Open the page in Chrome, right click on the page, select Inspect Element). Then, open the 'Elements' tab (bottom left) and 'Styles' tab (bottom right). Scroll the 'Styles' tab until you can see the box with 'margin', 'padding', 'border', etc.

Now to debug the whitespace, select the elements one by one (at bottom left), while using your mouse to highlight the 'margin' or 'padding' (at the bottom right). You'll find that most of the unwanted whitespace belongs either to the padding or the margin from one of the elements.

To fix that, add the selection in your CSS to select the problematic element, and adjust its 'margin' or 'padding'.

Hope that helps

Answer 6 · 2014-04-23T13:11:47Z

April 23, 2014 1:11pm

I compared your code to Nick's and couldn't find anything glaring. You did use a different font, font weight, and slightly different margins for h2, which may be worth looking into to see if there's nothing funky going on there. Does copying his code exactly work? If it still has the same issues, then maybe it's something in the browser.

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.75em;
  font-weight: normal;
  line-height: 0.8em;
}

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

Answer 7 · 2014-04-23T13:28:52Z

April 23, 2014 1:28pm

I'm just following his videos along for a reference to a site I am doing to further understand the content. When I followed along with them the first time they worked out perfectly. Thats why I am so confused.

Answer 8 · 2014-04-24T00:41:25Z

April 24, 2014 12:41am

Why don't you post the HTML for the header ?

Answer 9 · 2014-04-24T13:53:00Z

April 24, 2014 1:53pm

<body>
    <header>
        <a href="index.html" id="logo">
            <h1>Jenna Nicole</h1>
            <h2>Photographer</h2>
        </a>
            <nav>
                <ul>
             <li><a href="index.html" class="selected">Galleries</a></li>
             <li><a href="about.html">About</a></li>
             <li><a href="contact.html">Contact</a></li>
                 </ul>
        </nav>
    </header>

here it goes. I really cannot figure this out. I have been on other forums asking around too. Seems like a mystery.

Answer 10 · 2014-04-24T13:54:55Z

April 24, 2014 1:54pm

Either of you use Code pen? I may just post it up there and post a link in here to take a look at it?

Answer 11 · 2014-04-24T20:06:25Z

April 24, 2014 8:06pm

That is a good idea-I'll look at it there!

Answer 12 · 2014-04-25T01:14:59Z

April 25, 2014 1:14am

Your <header> has 5px margin on top, and the <H1> has 15 px margin on top and the bottom. I think that's the white space above the header that you are seing now. Try this :

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <header>
        <a href="index.html" id="logo">
            <h1>Jenna Nicole</h1>
            <h2>Photographer</h2>
        </a>
            <nav>
                <ul>
             <li><a href="index.html" class="selected">Galleries</a></li>
             <li><a href="about.html">About</a></li>
             <li><a href="contact.html">Contact</a></li>
                 </ul>
        </nav>
    </header>
  </body>

</html>

header {
    float: left;
    margin: 0 0 30px 0;
    padding: 0 0 0 0; /*< Remove the padding on top */
    width: 100%;
}

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

h1, h2 {
    font-family: 'Handlee', sans-serif;
    font-weight: 600;
    line-height: 0.8em;
}

h1 {
    margin: 0 0 15px 0; /*< Remove the margin on top */
    font-size: 1.75em;
}

h2 {
    font-size: 1em;
    margin: -10px 0 0;
}

h3 {
    font-family: 'Handlee', sans-serif;
    font-size: 1.0em;
    font-weight: 600;
    text-align: center;
    margin: 15px 0 20px 0;  
}

Answer 13 · 2014-04-26T22:48:45Z

April 26, 2014 10:48pm

White space issue for white gap accross the top is normally caused when using inline-elements, you can fix this bug by setting a border-top: 1px solid #color; property to the top element.

element { 
    border-top: 1px solid #000;
}

Answer 14 · 2014-04-27T20:25:51Z

April 27, 2014 8:25pm

Thanks for all the feedback, all seem useful in different areas of debugging however non of these are working for me. I am stumped. I have a friend who is a from end developer I will get to check it out. Thank you all for the help!

Answer 15 · 2014-07-06T19:26:55Z

July 6, 2014 7:26pm

HI Evan Osczepinski I am having this exact same problem. As far as I can see my code is exactly as per the lessons. I have white space on the About page only and no problem once I resize it smaller. Did you manage to find a solution?

Answer 16 · 2014-07-28T14:11:16Z

July 28, 2014 2:11pm

I have the same problem with the About page.

Answer 17 · 2014-09-06T22:46:48Z

September 6, 2014 10:46pm

I found the answer. For me the problem lies in the h3 element that says 'General Information'. Normalize.css applies this code :

h3 { font-size: 1.17em; margin: 1em 0; }

So to clear use h3 { margin:0; }

in main.css

When you are using the chrome inspector you have to open up all the nested elements and search carefully.

Welcome to the Treehouse Community

Looking to learn something new?

Evan Osczepinski

Evan Osczepinski

Whitespace above header color

17 Answers

Laura Cressman

Laura Cressman

Evan Osczepinski

Evan Osczepinski

Laura Cressman

Laura Cressman

Evan Osczepinski

Evan Osczepinski

Daniel Widyanto

Daniel Widyanto

Evan Osczepinski

Evan Osczepinski

Laura Cressman

Laura Cressman

Evan Osczepinski

Evan Osczepinski

Daniel Widyanto

Daniel Widyanto

Evan Osczepinski

Evan Osczepinski

Evan Osczepinski

Evan Osczepinski

Laura Cressman

Laura Cressman

Daniel Widyanto

Daniel Widyanto

James Ingmire

James Ingmire

Evan Osczepinski

Evan Osczepinski

Courtney Novits

Courtney Novits

Jaime Almond

Jaime Almond

Skye Aoki

Skye Aoki

Jonas Ajane

Jonas Ajane