alinhamento menu

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; }