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

Span Header/titlebar across screen

Hello all,

When you create a header or titlebar and span it 100% with 0 margin on the left and right, there is always a few pixels on the left and right that are not covered...how do you span it the full length plus some more to account for this gap without just settings the width to 105% or taking out some margin on the left??

7 Answers

Try using a css reset of:

*{
margin: 0;
padding: 0;
}

This should get rid of your margin too. (in any browser)

Also think about changing the font or font-color it has nearly no contrast.

~ Nikos.

You're sure there are no additional classes with margins on certain element?

Can you give us a specific example? Also which Browser are you using?

~ Nikos.

using chrome...you can see how on www.justinlicata.com the nav is 100% with no margin but has space on the left and right...now if you look at the page you're on now...team treehouse...the nav bar spans across the full 100% with no space...

I'm using Chrome

Justin - Check out the inspect element function in Chrome.

View the styles for the body element, shows that the user agent stylesheet has applied a margin of 8px.

To override that default browser style, use body { margin: -10px 0 0 0; }.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Even something simple like adding margin: 8px 0; to the body rule will work. You just need to reset the left and right body margins to 0.

Thanks Nikos...that worked!

Justin,

Are you using any kind of CSS reset? That should be another way to remove the user agent issue that James mentioned.