Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

why create a <div class="container clearfix"> within the header tag?

I'm not getting why the additional <div class="container clearfix"> has to be added between the header tags to get the desired results. Isn't <header class=".main-header"> already a container for the .name and .main-nav?

I added a red border around all header elements to try and figure this out. When I coded <header class="main-header clearfix" and left out the additional div container - the results were visibly different - the header content didn't seem to sit or line up the same way within the header v. using the extra container. So what's actually happening here?

2 Answers

Austin Whipple
Austin Whipple
29,712 Points

Usually you'll add a container within a larger element such as a full-width header or footer element when you want the content within a header to adhere to a maximum width, but would prefer the larger element to stay full width.

So in your example, we can apply a black background to <header> and it'll stretch to both edges of the browser. Within that <header> element, we wrap the navigation and site name in <div class="container"></div> and give .container "max-width: 900px;" and "margin: 0 auto;" to keep it centered in the black header and not exceed 900px wide even if the browser exceeds that width.

Austin, thank so much - I did what you said and see what you mean.

As a follow up - is it also correct to say that the added inner container in this instance, is a better way to center and create space away from the screen edges for these elements, as oppose to applying a left margin to the site name and then an equal right margin to the navigation ? I believe that's how this effect was done in "How to build a Website".

Austin Whipple
Austin Whipple
29,712 Points

Jenn G.,

Yup, this a much easier way to add spacing between the browser edges and those elements. Usually involves fewer lines of code, is less likely to break, and performs better in responsive designs.

Austin, much appreciated!