Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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
220,426 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

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

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.