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!

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


troy beckett
troy beckett
12,035 Points

trouble with designing website..

please have a look at my code pen below:


Can someone please explain why when I color the background of the body red it covers the whole page. What I want to achieve is this:


I want to have the logo and nav bar seperate from the body like most websites you see. So when I style the body it applies it to the space below the log and nav section.

Thanks for helping in advance. 'mI really eager to learn html and css but I'm currently struggling with these small problems all the time. I'm going to try and solve it myself but it would be great to get some advice.

4 Answers

you can remove the background-color from the body element and add it to the nav and logo elements in CSS


width: 30%; margin-left: 2% background: red; }

nav { width: 60%; float: right; background: red }

But im not sure why the color doesn't spread across the entire header like Nick's does

The header must be inside the body.

The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Put your header inside the body and apply the color you want.

.a{fill-rule:evenodd;}techdegree seal-36
Front End Web Development Techdegree Graduate 56,488 Points

Hi Trey, i am trying to get the hang of all of this myself so let's try together!

In your HTML document you first have the head where your stylesheets etc goes, then you have the body which all of your headers, divs and texts etc will be inside of.

The header is placed within the body of the HTML document which means that making a color change using the body tag in your CSS will also change the color of the header. What you can do to fix this is for an example choose your body background color and then use the header tag directly below it to change the color of your header.