Olá Felipe, tudo bem?
Desculpas pela demora em dar o retorno.
Temos dois pontos a serem discutidos, onde um deles é o que de fato está fazendo com que tenha essas divergências no <header>. Vamos lá!
Parte 1
O primeiro ponto não está relacionado diretamente a diferença de tamanho, mas é algo que precisamos estarmos atentos. No HTML do index e da página de produtos, o <nav> está sendo aplicado como filho de <ul>, quando na verdade a sintaxe correta é o <ul> sendo filho de <nav>, visto que o único filho direto do <ul> são os <li>.
Modificando em ambas as páginas, o <header> ficará assim:
<header>
<div class="caixa">
<h1><img src="logo.png" alt=""></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>
Parte 2
Além disso, temos um conflito que está causando essa diferença de tamanhos. Isto ocorre, pois no arquivo index.html temos duas listas não ordenadas (ul), uma referente ao menu de navegação e a outra aos itens que compõem a seção de benefícios da página.
Dessa forma, quando aplicamos no style.css as seguintes propriedades:
ul {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;
}
Elas não estão sendo aplicadas apenas ao <ul> dos benefícios como deveria, mas também ao <ul> do menu de navegação, causando conflitos com as propriedades que também estão sendo aplicadas simultaneamente a lista não ordenada por meio no <nav>. Como na página de produtos não existem essas propriedades sendo aplicadas, o resultado visual é diferente.
Um poucos mais para frente nos cursos, o instrutor resolve essa divergência criando uma classe para essa <ul> que representa uma lista de benefícios, dessa forma as propriedades serão aplicadas somente a ela e não a todos os ul's de forma generalizada. A seguir colocarei os códigos com as modificações finais.
No index.html ficará assim:
<div class="beneficios">
<h3 class="titulo-centralizado">Benefícios</h3>
<ul class="lista-beneficios"> <!--classe que foi criada-->
<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="beneficios.jpg" class="imagembeneficios">
</div>
No style.css ficará assim:
.lista-beneficios {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;
}
Peço desculpas novamente pela demora em dar o retorno.
Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!
