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
Jeff Hartman
8,498 PointsCan't get white space at the top of my header to go away
I have a white space at the top of my header that will not go away. I'm following along with the video and I have tried to replicate the instructor's code, but when I added the following to my css:
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
the white space above the header did not go away as it did in the video instructor's example. How can I find and the correct the problem? What is causing the white space and where do I look for errors?
Jeff Hartman
8,498 PointsOh cool, I didn't know about snapshots. Here it is: https://w.trhou.se/ldq0jfw171
I added some notes for my own benefit as I went and changed some text, but for the most part I think I was pretty close to the tutorial.
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Jeff,
In this case, it was the "Great cats are coming!" paragraph that you added. I would recommend that you get comfortable with using your browsers developer tools as Jonathan has recommended. This makes it easier to see what's causing these types of problems.
It's the top margin on that paragraph which causes the gap above the header. It might seem strange that it could reach up that high but it's because the header is floated and you have vertical margin collapsing. You can read more about that here if you're interested: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
To correct this, you can have the next element after the header clear the floats. In this case, it's the wrapper div.
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
clear: both;
}
By adding clear: both;, you're telling the browser that it should force the wrapper div down below any previously floated items. This way, the paragraph margin can no longer reach up through the floated header.
Jeff Hartman
8,498 PointsAh, thank you. I'll stick closer to the tutorials from here on out. Appreciate the help!
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi Jeff,
Can I ask which browser you use? You may be able to find the element that's causing the whitespace by using Chrome DevTools and inspecting the elements. Whitespaces is usually a problem with margins and padding bleeding into the space of another element. It can be gotten rid of by locating the margin and padding that is overlapping and removing that from the code.
Without a link or code to replicate the issue it's a bit tricky to go through the precise steps but if you preview the code int your browser, open Chrome DevTools with Ctrl + Shift + J (or CMD + Shift + J on a Mac) you'll be able to do a little detective work to find the culprit and get round it :)
Good luck
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Jeff,
You can post a snapshot of your workspace which will make it easier for us to check your code. Did you customize this yourself at all beyond what Nick does in the video?