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

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.