Alguém pode me ajudar? Quando a página fica menor o conteúdo não fica da mesma forma quando em tela cheia | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Vou deixar uma imagem pra ficar mais claro e em baixo o código Insira aqui a descrição dessa imagem para ajudar na acessibilidade

HTML

<!DOCTYPE html>
<html lang="pt-br">
  <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="reset.css">
      <link rel="stylesheet" href="style2.css">
  </head>
  <body>
      <header>
          <div class="caixa">
              <h1><img id = "logoPreta" src="imagens_produtos/logo.png" alt=""> </h1>
              <nav>
                  <ul>
                      <li><a href="pag_inicial.html">Home</a> </li>
                      <li><a href="produtos.html">Produtos</a> </li>
                      <li><a href="contatos.html"> Contato</a></li>
                  </ul>
              </nav>
          </div>           
      </header>
      <main>
          <ul class="Produtos">
              <li>
                  <h2>Cabelo</h2>
                  <img src="imagens_produtos/cabelo.jpg" alt="Cabelo">
                  <p class="descriçao">Na tesoura ou máquina, como o cliente preferir</p>
                  <p class="preço">R$ 25,00</p>
              </li>
              <li>
                  <h2>Barba</h2>
                  <img src="imagens_produtos/barba.jpg" alt="Barba">
                  <p class="descriçao">Corte e desenho profissional de barba</p>
                  <p class="preço">R$ 18,00</p>
              </li>
              <li>
                  <h2>cabelo+barba</h2>
                  <img src="imagens_produtos/cabelo+barba.jpg" alt="Cabelo e Barba">
                  <p class="descriçao">Pacote completo de cabelo e barba</p>
                  <p class="preço">R$ 35,00</p>
              </li>
          </ul>
      </main>
      <footer>
          <img src="imagens_produtos/logo-branco.png" alt="logo branco">
          <p class="copyright">&copy; copyright Barbearia Alura - 2022</p>
      </footer>
  </body>
</html>

CSS

@charset "UTF-8";
header{
  background-color: #b3b2b3;
  padding: 20px 0; 
}
#logoPreta {
  padding-left: 10%;
}
.caixa{
  width: 940px;
  position: relative; 
  margin: 0 auto; 
}
nav{
  position: absolute;
  top: 110px;
  right: 0;
}
nav li {
  display: inline;
  margin: 0 0 0 15px;
}
nav a{
  text-transform: uppercase; 
  font-weight: bold;
  font-size: 22px;
  color: black;
  text-decoration: none; 
}
nav a:hover{ 
  color: blue;
  text-decoration: underline;
}
.Produtos{
  width: 940px;
  margin: 0 auto;
  padding: 50px 0;
}
.Produtos li{
  display: inline-block;
  text-align: center;
  width: 30%;
  vertical-align: top;
  margin: 0 1.5%;
  padding: 30px 20px; 
  box-sizing: border-box; 
  border-width: 2px;
  border: 2px solid black;
  border-radius: 15px;
}
.Produtos li:hover{
  border-color: blue;
}
.Produtos li:active{ 
  border-color: blueviolet;
}
.Produtos li:hover h2{  
  font-size: 40px;
}
.Produtos h2{
  font-size: 30px;
  font-weight: bold;
}
.descriçao{
  font-size: 18px;
  padding: 30px 20px;
}
.preço{
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
}
footer{
  background: url("imagens_produtos/bg.jpg"); 
  text-align: center;
  padding:  40px 0;
}
.copyright{
  color: rgb(255, 255, 255);
  font-size: 13px;
  margin: 20px 0 0;
}

Olá, Milena!

O que acontece é que o elemento header está se ajustando ao tamanho do viewport (parte do conteúdo que pode ser visualizada pela janela do navegador naquele momento), mas a sua div caixa tem a largura fixa de 940px, e o seu menu de navegação está configurado para ficar sempre "colado" do lado direito da div caixa.

Desta maneira, toda vez que você ajusta a tela para uma largura menor que 940px, o header se ajusta, mas a div caixa não consegue se ajustar. Como o background cinza está no elemento header, acaba gerando esse efeito visual indesejado. Não se preocupe, pois mais a diante você verá como deixar seus sites responsivos a qualquer tamanho de tela.

Boa sorte em seus estudos!

Mergulhe em programação