Selectin Header vs Header class

Hello everyone, I’m doing the Tea Cozy Project. and right now with header with NAV bar, I went throw exercises and I still dont get this. I did what I need to do, but I don’t get why this is working.
When I edit the Header element, I don’t get my NAV bar in the same size as my header, but if i code into class .head-container everyting works perfectly. It probably a simple explanation, but for now I don’t get it. I will appreciate any help


<header class="head-container">
        <img src="images/logo.jpeg">
        <nav>
            <span><a href="missions">Mssions</a></span>
            <span><a href="tea">Featured Tea</a></span>
            <span><a href="locations">Locations</a></span>
        </nav>
    </header>
.head-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
header {
    background-color: purple;
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;
    position: fixed;
    z-index: 1;
    align-items: center;
}