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

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,712 Points
Austin Whipple
Austin Whipple
29,712 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,947 Points
Alexander La Bianca
Alexander La Bianca
15,947 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,712 Points
Austin Whipple
Austin Whipple
29,712 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.