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
Zubair Siddique
4,889 PointsThin White Space above the header??
There was some horizontal thin white space above the header all arcoss the screen. I did:
float: left; width: 100%
But, it didn't vanish. I removed all html content under <section> tag and refreshed the page. It vanished. :-)
So, I gave margin-bottom: 30px to the <header> to separate the <header> and <section> and wrote back all content of <section> but again, didn't solve the problem.
The content of <section> is affecting the <header> in some way i don't know. Is there something wrong with my <section> content? How can I get rid of the problem?
5 Answers
Ted Sumner
Courses Plus Student 17,967 PointsThe reason you have that problem is that the header margin hits the section margin and there is no content in between. It is margin collapse. The issue is resolved with clearfix. There are several ways to do this, but the most accepted one that I have found is:
header:after {
content:"";
display:table;
clear:both;
}
Ted Sumner
Courses Plus Student 17,967 PointsYour issue is almost certainly margin collapse. Please review this post for the solution and a link to a detailed description of the issue.
Zubair Siddique
4,889 PointsThis is the snapshot. Have a look on it. Thanks!
Ted Sumner
Courses Plus Student 17,967 PointsI edited your answer to make it clear where the snapshot is. If you make a name a hyperlink it is normal to make it the person's profile.
Zubair Siddique
4,889 PointsI just read my first comment in this post and wondered to see some missing words. I wrote "section" in angle brackets, which is gone after publishing the post.
So, my problem was (is) that the content of "section" is messing with the "header". When I remove the content of "section" tag, thin white space above the header vanishes. But when the content of "section" is written again, it reappears. So, content of "header" and "section" are not happy with each other. Thanks for reading again.
Zubair Siddique
4,889 PointsThanks Ted,
One last thing. Where to put this CSS Rule? Give me the exact location.
Colin Marshall
32,861 PointsYou can put it anywhere in your CSS, since it is not overriding any existing CSS. For organizational purposes, I would put it right below your other header selector in your main.css file.
Ted Sumner
Courses Plus Student 17,967 PointsYes, immediately after the problematic css. One thing that large systems like Bootstrap does is has a clearfix class that you add to any element that needs a clearfix.
Colin Marshall
32,861 PointsColin Marshall
32,861 PointsAre you using a CSS reset like normalize.css to get rid of the default styling from browsers? Also, posting your example on CodePen would help so we can see what's happening. Thanks!