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

.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

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

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.