Eu tentei fazer o posicionamento um pouco à frente do que o instrutor estava fazendo no vídeo e acabei descobrindo que usei uma solução diferente da dele. Ao invés de usar o posicionamento absoluto e incluir mais uma tag pra envolver os elementos do header, usei um tipo de display que ainda não vimos nesse curso, mas que permitiu alinhar os elementos de forma mais simples e com menos linhas de código.
products.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="products.css">
</head>
<body>
<header class="header">
<h1 class="logo" ><img src="logo.png" alt=""></h1>
<nav class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li> <a href="products.html">Produtos</a></li>
<li><a href="contact.html">Contato</a></li>
</ul>
</nav>
</header>
</body>
</html>products.css
.header {
background: #bbb;
margin: 0;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px;
}
.navigation li {
display: inline;
margin-left: 15px;
}
.navigation a {
text-transform: uppercase;
color: #000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}