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

General Discussion

Posted by Ryan Decker
Ryan Decker
3,451 Points

CSS issues.

Hey all!

I'm having issues with getting my header (background color) to fully fill the page.

Here is what I am using:

''' header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; } ,,,

In one file this is working fine. I have identical settings in the CSS file it is not working in.

I guess my question is how do I get my header (background color) to fully fill the top, left, and right of the page???

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Are you matching the code to the correct element in the file it's not working in? Is it having any effect on the page at all? :-)

Ricardo Hill-Henry
Ricardo Hill-Henry
38,443 Points

What's in your header?

4 Answers

Ryan Decker
Ryan Decker
3,451 Points
Ryan Decker
Ryan Decker
3,451 Points

Yes. I've basically copied EVERYTHING. I've used different colors, but EVERYTHING else is the same. The font size and some of the spacing is also not displaying correctly. Really Odd....

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

just to be sure you're actually using background-color: #example; style properly

Try putting number values in margin: top; right; bottom; left so

margin: 30px; 30px 0 30px;

But it's a bit tricky without not having done the code challenge yet. :-)

Ryan Decker
Ryan Decker
3,451 Points
Ryan Decker
Ryan Decker
3,451 Points

Ricardo, this is what's in my header:

,,, header {

float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; } ,,,

Ricardo Hill-Henry
Ricardo Hill-Henry
38,443 Points

No, I mean within your html. The problem could be with an element within your header, and not the header itself.

I do know personally I would use positioning offsets if I wanted to align it to the top:

header{
 width: 100%;
 height: 60px; /* However much */
 position: relative;
 top: 0;
}

But it's a matter of personal preference. With floats you could be having a collapsing issue caused by an element within the header, so post the markup.

Ryan Decker
Ryan Decker
3,451 Points
Ryan Decker
Ryan Decker
3,451 Points

Ricardo,

You are right. The issue was NOT with the CSS. I copied and pasted the CSS from the "working file" into the "non-working" file and the issue was the same. I did the same with the HTML file, and it worked.

I wasn't trying to align the text to the top of the header, but make the background color of the header extend to the top, left, and right of the page so there was NO white space.

,,, header {

float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; } ,,,

The above code does the trick.