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

Amandeep Pasricha
Amandeep Pasricha
14,932 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,014 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,014 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,932 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.