Why is the navigation bar overlapping the header?

Asyoucanseethenavigationbariscoveringtheheader(thatthebannerasbackground),butintheory(basedonmyknowledge,ofcourse)theheadershouldstartrightafterthenav.

NOTE:Itriedtogiveamargin-topintheheaderjusttotestandthenavwentdownwithhim.Itriedtousez-indexanditremainedthesame.

Anyway,hereismyHTMLandCSS,respectively:

HTML:

<nav><divclass="logo">
            <img src="assets/img/logo.png" alt="">
        </div>
        <div class="nav-main">
            <ul>
                <li>Início</li>
                <li>Organização</li>
                <li>Parceiros</li>
                <li>Programação</li>
                <li>Hospedagem</li>
                <li>Trabalhos Cientifícos</li>
            </ul>   
        </div>
        <div class="inscreva-nav">
            <button>Inscreva-se</button>
        </div>
    </nav>

    <header></header>

CSS:

/*barra de navegação*/

nav {
    height: 124px;
    width: 100%;
    background: #c4322e;
    position: fixed;
    opacity: 0.6;
    display: block;
}

.logo{
    height: 124px;
    width: 205px;
    display: inline-block;
}

.logo img{
    width: 100%;
    margin-top: 2.2rem;
}

.nav-main{
    display: inline-block;
}

nav ul{
    float: left;
    list-style: none;
    color: white;
}

nav li{
    font-size: 30px;
    display: inline-block;
    margin-right: 33px;
}

.inscreva-nav {
    float: right;
}

nav button {
    font-size: 30px;
    width: 285px;
    height: 62px;
    background: none;
    border: solid white 3px;
    border-radius: 3px;
    color: white;
    margin-top: 1.8rem;
    margin-right: 23px;
}

/*barra de navegação - fim */

/* header*/
header{
    background: url(../img/teaser.jpg) no-repeat fixed; 
    width: 100%;
    height: 464px;
    display: block;
}