Cabeçalho da pagina principal não alinha | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Oi pessoal!

Estou tentando alinhar o cabeçalho da pagina HOME do projeto e segui todo o processo, mais as dicas aqui do fórum, mas não consigo deixar ele em linha e nem na posição desejada. Helppppppp :´)

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Barbearia Alura</title>
    <link rel="stylesheet" href="style-home.css">
  </head>
  <body>
    <header>
      <div class="menu">
      <h1 class="titulo-principal">Barbearia Alura</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="produtos.html">Produtos</a></li>
          <li><a href="contato.html">Contato</a></li>
        </ul>
      </nav>
      </div>
    </header>
    </div>
    <img id="banner" src="img/banner.jpg">
    <div class="principal">      
      <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>
      <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
      <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
      <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
   </div>
   <div class="beneficios"> 
     <h3 class="titulo-centralizado">Benefícios</h3>
     <ul>
       <li class="itens">Atendimento aos clientes</li>
       <li class="itens">Espaço diferenciado</li>
       <li class="itens">Localização</li>
       <li class="itens">Profissionais Qualificados</li>
     </ul>
     <img src="img/beneficios.jpg" class="imagembeneficios">
   </div>   
  </body>
</html>

.menu {
  position: relative;
  width: 940px;
  margin: 0 auto;
}
nav {
  position: absolute;
  top: 5px;
  right: 0;
}  
nav li {
  display: inline;
  margin: 0 0 0 15px;
}

nav a {
  text-transform: uppercase;
  color: #000;
  font-weight: bold;
  font-size: 22px;
  text-decoration: none;
}
#banner {
  width: 100%;
}
.principal{
  background: #cccccc;
  padding: 30px;
}
.titulo-principal {
  padding-left: 20px;
}

.titulo-centralizado {
  text-align: center;
}
p {
  text-align: center;
}
#missao {
  font-size: 20px;
}
em strong {
  color: red;
}
.itens{
  font-style: italic;
}
.beneficios{
  background: #FFFFFF;
  padding: 20px;
}
ul {
  display: inline-block;
  vertical-align: top;
  width: 20%;
  margin-right: 15%;

}
.imagembeneficios {
  width: 50%;
}