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

HTML

Posted by Justin Warren
Justin Warren
7,805 Points

So random question. How do I get my header img to span the whole width of the page (so there is no small white space...

between the top of the browser window and my image? Also, so that there is no space on the left and right sides?

1 Answer

Matthew Lang
Matthew Lang
13,483 Points
Matthew Lang
Matthew Lang
13,483 Points

Make sure your image element is inside either the <body> or inside an element that spans the full width of the body. Have your image a width of 100% Remove all margins (especially left, right and top)

If this still doesn't work, make sure you are using a css reset. This removes all default styling done by one's browser, and gives you an easy playing field.

If it still doesn't work then please post your code.

Justin Warren
Justin Warren
7,805 Points

Okay thanks! Does the normalize.css file come after my css file or before?

Also, to clarify it is the header that I am having issues with. It now spans the full width of the page (it is a color btw) but I still have with space above. I'd like to have the color reach the top of the page. Similar to the way the gray does on this treehouse page. Hope that makes sense! Thank you!

Matthew Lang
Matthew Lang
13,483 Points

Your normalize.css file should be linked before any other stylesheet.

Does your header have any elements like an h1 inside it? If so, make sure the h1 or anything else has 0 top margin. If you are on chrome, you can right click anywhere on the page, and choose 'Inspect'. Then you can press 'Ctrl+Shift+C' and hover over any element on the page and it will show you the margin, padding, and border values. Margin is orange, padding is green. Google Chrome Developer tools for more information on that.