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 trialJoshua 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
Treehouse StaffHey 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
2,886 PointsJustyn Phearson
2,886 PointsMissing the semicolon behind margin, i.e. margin: 0 -8px;
Mark Sutton
Front End Web Development Techdegree Student 2,138 PointsMark Sutton
Front End Web Development Techdegree Student 2,138 PointsIsn't the problem the missing colon after margin? margin: 0 -8px;