Não consigo deixar alinhado o menu "HOME PRODUTOS CONTATO".
Nas páginas de "produtos" e "contato" ficam bem próximos. Já na "Home" dá tudo errado, mesmo copiando.
http://127.0.0.1:3000/c%3A/DEVPPCC/ProjetosDevPPCC/BARBEARIA/BarbeariaAlura.html
header { background: url("metal.jpg"); padding: 20px 0;}
.caixa { position: relative; width: 940px; margin: 0 auto; }
nav { position: absolute; top: 110px; right: 0; }
nav a { text-decoration: none; text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px;}
nav a:hover { color: #C78C19; text-decoration: underline; }
nav a:active { color: #3CB371; text-decoration: underline; }
.botao:hover { cursor: pointer; }
#banner{ width: 100%; margin-top: 0%; }
.principal { background: #CCCCCC; padding: 20px; border: 5px solid #000000; }
.titulo-principal { padding-left: 50px; text-align: center; margin: 0 0 0 30px; padding: 0 20px;}
#titulo-centralizado { text-align: center; font-weight: bold;}
h2 { font-size: 24px; height: 15px; margin: 40px;}
p { text-align: center; font-size: 20px;}
#missao { font-size: 20px; margin: 20px;}
em strong { color:#be6e23; }
h3 { font-size: 24px; height: 5px; margin: 40px;}
.itens{ font-style: italic; padding: 30px 20%; text-align: center; }
.beneficios{ background: #c2c2c2; padding: 10px 10px; text-align: center;}
ul { display: inline-block; width: 40%; margin-right: auto; vertical-align: top;}
.imgBeneficios{ width: 20%; box-sizing: border-box; border: 2px transparent; border-radius: 500px;}
li { font-size: 20px; text-align: justify;}
footer { text-align: center; background: url("bg.jpg"); padding: 40px 0; }
.copyright { color: #FFFFFF; font-size: 13px; margin: 20px 0 0; }