Não estou conseguindo adaptar o Header

O site está assim e não consigo arrumar de jeito maneira 

.banner { width: 100%; }

.titulo-principal { text-align: center; font-size: 2em; /* Issovquer dizer que o titulo irá ter 2 vezes o tamanho das fontes bases/ margin: 0 0 1em; /Proporcional ao paragrafo do título/ clear: left; / Limpa o Float*/ text-shadow: 1px 1.2px #888888; }

.imagem-icon{ width: 160px; float: left; margin: 1em; }

.principal { padding: 3em 0; background: #FEFEFE; width: 940px; margin: 0 auto; box-shadow: inset 0 0 30px #e9b754; }

.principal p { margin: 0 0 1em; }

.principal strong { font-weight: bold; }

.principal em { font-style: italic; }

.mapa{ padding: 3em; background:linear-gradient(#FEFEFE,#888888) }

.mapa-conteudo { width: 940px; margin: 0 auto; }

.mapa p { margin: 0 0 2em; text-align: center; }

.beneficios{ padding: 3em 0; background: #888888;

}

.conteudo-beneficios{ width: 640px; margin: 0 auto;}

.lista-beneficios{ width: 40%; display: inline-block; vertical-align: top; }

.itens{ line-height: 1.5; }

.itens:first-child{ font-weight: bold; }

.itens::before{ content:"❇"; }

.imagem-beneficios { width: 60%; opacity: 1; /*Tag para dar opacidade a o elemento */ box-shadow: 5px 5px 2px #e9b754; }

.imagem-beneficios:hover{ opacity: 0.7; /*Tag para dar opacidade a o elemento */ }

.video { width:560px; margin: 2em auto; }

/*Adaptando para outros dispositivos */ @media screen and (max-width: 480px) { .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video { width: auto; }

h1 {
    text-align: center;
}

nav {
    position: static;
}

.lista-beneficios, .imagem-beneficios {
    width: 100%
}

}

/Css da Página Produtos/ .main{ background-color: aqua; }

body { background-color: white; font-family: 'Montserrat', sans-serif; }

header { background-color:#e9b754 ; padding: 20px 0; }

.caixa { position: relative; width: 940px; margin: 0 auto; }

.logo { width: 100px; margin: 0 10%; }

nav { position: absolute; top:110px; right: 0; }

/* Coloquei o espaço (margin) no nav pois se encaixa como um todo, observe no inspecionar do google*/ nav li { display: inline; margin: 0 0 0 15px;}

nav a { text-transform: uppercase; color: black; font-weight: bold; font-size: 22px; text-decoration: none; /tirei o subllinhado/ }

nav a:hover { /*como ele comporta quando o mouse passa pela frase */ color: #ff9c08; }