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 CSS Layout CSS Layout Techniques Fixed and Sticky Positioning

Joshua Munoz
PLUS
Joshua Munoz
Courses Plus Student 7,794 Points
Posted by Joshua Munoz
Joshua Munoz
Courses Plus Student 7,794 Points

#interesting-banner ID not reaching to the edge of the screen.

When adding this code to complete the final part of the lesson

     #interesting-banner {
position: sticky;
top: 0;
padding: 10px 15px;
border: 12px solid lightsalmon;
margin 0 -8px;
background: firebrick;
color: white;
font-weight: bold;

I noticed when i scolled down to where it covers the header with my banner I can still see the header on the left and right side instead of fully covering it i tried setting the width to 100% and there was still no change. there's maybe 5 pixels of space on each side.

1 Answer

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Rohald van Merode
Treehouse Staff
Rohald van Merode
.a{fill-rule:evenodd;}techdegree seal-36
Rohald van Merode
Treehouse Staff

Hey Joshua Munoz,

Great question and well spotted! When inspecting the body element with the developer tools you might notice that there's a default margin of 8px on the body element. This is causing the #interesting-header not to expand the full width of the viewport. Reason why it doesn't affect the header is because that has a fixed position that takes it out of the normal document flow.

You can fix this by adding this rule to your css file: 

body {
    margin: 0;
}
Justyn Phearson
Justyn Phearson
2,886 Points
Justyn Phearson
Justyn Phearson
2,886 Points

Missing the semicolon behind margin, i.e. margin: 0 -8px;