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
chelseahansell
1,795 PointsProblem: floating header left creates space at top of the page
When the header is floated left it leaves a margin at the top of the page. However, when I remove the float the header won't re-arrange properly when doing the screen size adjustment for media queries.
header { float: left; width: 100%; margin: 0 0 35px 0; padding: 0; }
4 Answers
Andrew Stelmach
12,583 PointsYou could try adding some padding to the header, like warren says. And it can just be 1px of top padding to the header, like so:
.header { padding-top: 1px; }
If this doesn't work, I'm not sure what the problem is, because I can't see your code, but you could try adding the padding to the header's parent instead, whatever that is. And if that doesn't work, try adding the padding to the parent of the parent of the header!
lovell
7,882 Pointsadd padding to the header Chelsea
Andrew Stelmach
12,583 PointsCan you post the code so I can try to fix it for you?
Andrew Stelmach
12,583 PointsCodepen or similar is good for that, but you could just post the html and css here if you like.
chelseahansell
1,795 PointsI added 1px of padding to the body which seems to solve the issue. Thanks everyone!
Andrew Stelmach
12,583 PointsGreat! :-D