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

Amandeep Pasricha
Amandeep Pasricha
14,931 Points

Couldn't we use the text-align property for the contents of the header instead?

Instead of wrapping the content in the header, couldn't we have simply applied the text-align property for the header class? If you resized the browser window, you would get the content centred as well, similar to the footer, no?

3 Answers

Gabriel Pierce-Lackey
Gabriel Pierce-Lackey
11,010 Points

You can, but it's not efficient and makes it harder on yourself to do some things. For everything you want to do to those elements, that are at the top of the page, you will have to write at least twice. You use the header tag to group them together to reduce that.

.name {
    text-align: center;
    background: blue;
}

.main-nav{
    text-align: center;
    background: blue;
}

Or even

.name, .main-nav {
    text-align: center;
    background: blue;
}

You could do

.main-header{
    text-align: center;
    background: blue;
}

It's cleaner and easier to manage. You can easily add more to the header and have it all still have the same base styles applied to it without making yourself have to do more work and it is grouped together. It's the same thought to divs, and sections as well. I would recommend trying to make different kinds of changes to each element in the header, then adding the header tags around them and trying the same changes to see the differences.

Gabriel Pierce-Lackey
Gabriel Pierce-Lackey
11,010 Points

The header is more of just a section, kind of like the body or main tags. To group the intro section of your page together in the "header". Then even for using text-align you could using it on the header element instead of each separate element in header. Which also reduces the code you need to write and makes it easier to manage and read.

Here is the description of the header from MDN:

The <header> element represents a container for introductory content or a set of navigational links

Amandeep Pasricha
Amandeep Pasricha
14,931 Points

Gabriel Pierce-Lackey Wait sorry I didn't quite understand that. I know what the header does, but just why couldn't you center align the elements inside of it, as opposed to creating a separate wrapper like Guil does in the video? I feel like he would still get the same desired end-result that he was looking for in this video.