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

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

Posted by Tatenda Muza
Tatenda Muza
4,015 Points

.container wrapper

I notice the container wrapper is put on the content as well as on the main content and in the css it is set at 70% width. Why is it that the heading is taking up 100% of the width and not the 70% since it is wrapped in the container wrapper as well.

2 Answers

Axel Perossa
Axel Perossa
13,930 Points
Axel Perossa
Axel Perossa
13,930 Points

The header element is taking 100% width, hence you see the light blue background expands all across the page. But <header> contains the wrapper div in its interior, and that's whats being limited to 70% width.

The blue background (header) takes 100% width, the <h1> and <ul>, which in turn are inside the container div, take 70% width.

Robert Gouveia
PLUS
Robert Gouveia
Courses Plus Student 1,714 Points
Robert Gouveia
Robert Gouveia
Courses Plus Student 1,714 Points

Without looking at the css commands I can only assume that its because of the css values for instance the css might look like this:

.header .container{
width:100%;
}

Which means it over rides the container values and sets it to 100% just for the header.