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
delaney
7,743 Pointswhy 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
29,725 PointsUsually 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.
delaney
7,743 PointsAustin, much appreciated!
delaney
7,743 Pointsdelaney
7,743 PointsAustin, 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
29,725 PointsAustin Whipple
29,725 PointsJenn 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.