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

Bryce Eason
Bryce Eason
1,918 Points
Posted by Bryce Eason
Bryce Eason
1,918 Points

White space on the right side of header when set to 100% width

I'm trying to practice what I watched from the first couple videos on the How to Make a Website track to get myself back into the groove of things. But as far as I'm aware, my CSS is fine, so why is it I'm getting this white space to the right of my 100% width header?

I'm trying to do this mobile first, hence why I have it emulating an iPhone and other mobile devices.

http://i.imgur.com/gPSPIcw.png

David Morisset
David Morisset
13,323 Points
David Morisset
David Morisset
13,323 Points

Just had a look and it doesn't make sense at all to me either. Could there be something in your normalize file ? What happens if you remove it or if you try to put Eric Meyer's reset instead ?

3 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Looks like you might have a margin or padding there, but from something not shown in the screenshot. If you copy your work into a Treehouse workspace, you can use the "snapshot" function and then share the link to that.

I see you have the DevTools open. If you use them to select that area, they will show you exactly what styles are being applied to it. That's what I would do if I had access to the code.

There are rare times when !important is legitimately useful, but using it to fix unknown problems would not be one of them. Share your code if you still need help figuring it out.

Bryce Eason
Bryce Eason
1,918 Points
Bryce Eason
Bryce Eason
1,918 Points

So looking at it for an hour I finally realized I forgot to include the nav element in there. As soon as I added that to the CSS and set its margins and padding it all went into place.

Luca Argenziano
Luca Argenziano
16,416 Points
Luca Argenziano
Luca Argenziano
16,416 Points

It's hard to tell what's wrong with only a screenshot of the code available, but probably you set a margin to the right side of your header somewhere in your css. Try to force it to 0 with

    header {
      margin-right: 0!important;
    }

and see if it works. If not, look at the inspector, where you can check padding/border/margin/position of your elements, and find the one that has this margin.