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

Posted by Darrin Fagley
Darrin Fagley
12,432 Points

Mystery Margin above header

The margin at the top of the page above the header that we removed in the Heading section of the CSS works fine for my index.html and about.html pages, however copying and pasting all the same elements into my contact.html page the white space has reappeared above my header???

Header section of contact.html:

<header>
      <a href="index.html" id="logo">
        <h1>Darrin Fagley</h1>
        <h2>Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>

Heading section of main.css:

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

h2 {
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}
Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

I've updated your question formatting. Be sure to check out the Markdown Cheatsheet below the text editor for more help.

Darrin Fagley
Darrin Fagley
12,432 Points

Thanks Austin and Alexander for your help and code formatting corrections. I don't know if it is the best solution (I still do not fully understand the problem) but I applied a class to the first element on the contact.html page (a <h3>) and then targeted that class in my css with clear: both; and it seems to have corrected the issue.

1 Answer

Alexander La Bianca
Alexander La Bianca
15,959 Points
Alexander La Bianca
Alexander La Bianca
15,959 Points

Have you tried setting the margin of the body to 0? I believe the body has a small default margin

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Looks like this is the case. A lot of browser user agent stylesheets have a margin applied to the body element. Overriding that may help out. Also adding a clearing div at the end of your body (or using one of the other many clearfix methods) can help prevent collapsing elements and keep the display more consistent across all pages.

More about floats on CSS-Tricks.