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 trialDarrin Fagley
12,432 PointsMystery 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;
}
Darrin Fagley
12,432 PointsThanks 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
15,959 PointsHave you tried setting the margin of the body to 0? I believe the body has a small default margin
Austin Whipple
29,725 PointsLooks 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.
Austin Whipple
29,725 PointsAustin Whipple
29,725 PointsI've updated your question formatting. Be sure to check out the Markdown Cheatsheet below the text editor for more help.