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
Luis Cuevas-Fontan
Courses Plus Student 2,041 PointsAfter setting the margin of the header to (0 0 30px 0) there is still a white line on top of my header. Why?
This happened while I was working on the lesson named "How to Make a Website" where setting the margin on (0 0 30px 0) was supposed to fix that, but it didn't. What could be wrong?
Christopher Perez
6,884 PointsHello luis,
Not sure if you already got this answered but I'd like to try and help. If you could submit a clip of your code here so I and others can take a further look it would be helpful! However the white space you are referring to on top of you header can be the cause of several things; one of the being the body's margin not being set to zero or even an h1 element (or other elements) in you header having a margin setting that is preventing the header from staying fixed to the top .
You can also use google chromes "inspect" tool to see specifically what it is that is creating the issue. I've had the same problem recently and the statements I made above were the culprit. Hope this was helpful if not please let me know.
2 Answers
John Sawiris
4,510 PointsHi Luis, Regarding the problem that you're having, it's a very common issue that happene with the top and bottm margin and many web designers run into this. So, there are two ways to resolve this, either to set the top margin of the heading (h1, h2, h3, etc...) to zero which what Joshua suggested to do, and I think it's a great idea, or set the top padding of the main header container to value. That's should do it! Thank you! John
Ryan Miller
11,894 PointsHey, I have been having the same problem as Luis, but neither one of those solutions is working. The only things that fix it are removing the Float:left; or add margin: -20px 0 0 0; If i am doing something wrong or adding unnecessary things, please let me know. Thanks! Here is my code:
header { float: left; width: 100%; margin: -20px 0 0; padding: 10px 0 0 0; font-family: 'Arvo', sans-serif; background-color: palegreen;
}
Logo {
text-align: center; }
Logo a {
color:darkgreen; }
h1 { font-size: 2.5em; max-width: inherit; margin: auto; }
h2 { font-size: 1.15em; max-width: inherit; margin: auto; }
John Sawiris
4,510 PointsHi Rayn, when using the float layout keep in mind using the clear fix so it would prevent the other elements from wrapping around the floated element, that's why when you removed the float the problem got fixed. Back to the main issue, try using the universal selector and set the margin and padding to zero, like so:
- { margin: 0; padding: 0; } This going to remove the default styling of the browser. Check: https://necolas.github.io/normalize.css/ I hope that would reslove the issue Let me know if you have any other question
Ryan Miller
11,894 PointsSetting it to {margin:0; padding:0;} didn't work for me. As you said in the first paragraph, where would I put the clear fix that you mentioned?
Edit: I set Float:Inherit; and it fixed itself. Is this the correct way to deal with this? And what exactly is taking place when I use the inherit value? Thanks!
Joshua Allen
4,450 PointsJoshua Allen
4,450 PointsThe gap of white line indicates that the vertical margin has probably collapsed. To fix this, your body and your headers top margins need to be 0.
Try testing margin: 0 0; on the header element. Secondly, I would try margin-top: 0; because you need the top margin to be 0. It does seem a bit weird that you have 0, 0, 30, 0 and that won't work. I'm sorry if this was a bad explanation.