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

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 Plackey
Gabriel Plackey
11,064 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 Plackey
Gabriel Plackey
11,064 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

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.