Solucionado
Nunca desenvolvi em HTML e CSS, por isso não tenho a menor ideia do que deva ter acontecido. Ao implementar o código 'exatamente' como o do professor e abri-lo no navegador não obtive o mesmo resultado. Então, para simular um resultado semelhante tive de modificar, no css, o parâmetro "top". Alguém poderia me explicar?
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Produtos</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/produtos.css">
</head>
<body>
<header>
<h1><img src="../arquivos/logo.png" alt="Logotipo da barbearia alura"></h1>
<div class="caixa">
<nav>
<ul>
<li> <a href="index.html">Página Inicial</a></li>
<li><a href="produtos.html">Produto</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
</body>header { background: #BBBBBB; padding: 20px 0; }
.caixa { width: 940px; position: relative; margin: 0 auto; }
nav { position: absolute; top: -150px; right: 0; }
nav li { display: inline; margin: 0 0 0 15px; }
nav a { text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }
Olá, Eduardo. Tudo bem?
Deu essa diferença porque você colocou o <h1><img src="/logo.png" alt="Logotipo da barbearia alura"></h1> fora da <div class="caixa">, teria que ser assim :
<header>
<div class="caixa">
<h1><img src="/logo.png" alt="Logotipo da barbearia alura"></h1>
<nav>
<ul>
<li> <a href="index.html">Página Inicial</a></li>
<li><a href="produtos.html">Produto</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>Não esqueça de ajustar o Css:
nav {
position: absolute;
top: 110px;
right: 0;
}Valeu!