Olá! Demorou um tempo, precisei quebrar a cabeça um pouco mas consegui encaixar direitinho o cabeçalho e o rodapé na página de Home. Estou postando aqui o código comentado para quem assim como eu estava tendo dificuldades.
<body> <!-- Vou iniciar pelo body pois foi a única parte que mudou ok? Vamos lá! -->
<header>
<div class="caixa"> <!-- Essa caixa é o container do nosso cabeçalho ou seja, onde a imagem e o menu estão contidos -->
<h1><img src="logo.png"></h1>
<ul id="cabecalho"> <!-- Todas as partes do código que forem ser estilizadas pelo css precisam estar explicitamente nomeadas, caso haja outra parte do código com o mesmo nome (como é o caso do nosso menu de benefícios) tudo que for passado para o css será alterado em todas as partes. Por conta disso criei um identificador, para indicar que esse 'ul' pertence apenas ao nosso cabeçalho. -->
<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>
<div>
</header>
<main> <!-- Resolvi separar o cabeçalho do conteúdo principal adicionando a tag 'main'. -->
<img id= "banner"; src="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 id="menu-beneficios"> <!-- Assim como nosso cabeçalho, esse menu também possui uma 'ul' e uma 'li', então caso você não crie um identificador próprio, toda vez que o 'ul' e o 'li' forem chamados no css, acabarão afetando essa parte do código também. Criando um identificador você mostra ao css que aquela parte é exclusiva e tudo que for alterado nela, ficará contido apenas nela. -->
<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>
</main>
<footer> <!-- Adicionei a tag footer para separar o conteúdo principal do rodapé.-->
<img src="logo-branco.png">
<p class="copyright">©
Copyright Barbearia Alura - 2022
</footer>
</body>
