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

CSS

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

How to give the right side of the header more padding, or margin.

Up to now I always have issues with the header or nav. Part of the top is white, or there is white space at the sides. Most of the time I can fix it with a quick fix and bandage kind of approach.

Now I still have white space at the right side of the nav en header wich stays there if I add a negative padding, or margin. Help please.

https://w.trhou.se/ap0aeyglqb

1 Answer

Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer
Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer

Hopefully we can get this fixed up pretty easily!

First off, I would suggest removing the margin declaration margin: -28px 0 0 -10px from the nav rule. Secondly remove the margin-left: -30px declaration from the header rule. Since you are using fixed positioning on your header element, we can use the various positioning properties to ensure that your header takes up the full width of the viewport.

Alright, now at this point as you mentioned you will still see some of the gaps on the top and left sides of the header. We can easily fix this by adding two new declarations to the header element; simply add top: 0 and left: 0 and now you should see the header is taking up the full width of the viewport since you have a width of 100% already defined and all without having to do any hacky fixes using negative margins!

I hope this was helpful!