Olá, Alan.

Tudo bem?

Confere se o efeito de :hover está no elemento certo, e se o tamanho da fonte ou dos elemento afetados não está ficando grande demais quando passa o mouse.

Qualquer coisa compartilha o código dos arquivos: HTML e CSS, para nós dar uma olhada.

Valeu Alan.

Aparentemente, está igual ao do professor. Segue o código:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="produtos.css">

        <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>
                <li><a href="https://c.tenor.com/_bTaLmoLSc4AAAAd/troll-pilled.gif">Cupom de desconto</a></li>
            </ul>
        </nav>
    </div>
</header>

<main>
    <ul class="produtos">
        <li>
            <h2>Cabelo</h2>
            <img src="cabelo.jpg">
            <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
            <p class="produto-preco">R$ 25,00</p>
        </li>
        <li>
            <h2>Barba</h2>
            <img src="barba.jpg">
            <p class="produto-descricao">Corte e design de barba profissionais</p>
            <p class="produto-preco">R$ 18,00</p>
        </li>
        <li>
            <h2>Cabelo + Barba</h2>
            <img src="cabelo+barba.jpg">
            <p class="produto-descricao">Pacote completo de cabelo e barba</p>
            <p class="produto-preco">R$35,00</p>
        </li>
    </ul>
</main>

<footer>
    <img src="logo-branco.png">
    <p class="copyright">© Copyright Barbearia Alura - 2022</p>
</footer>

Na parte do CSS:

header { background: #BBBBBB; padding: 20px 0; }

.caixa { position: relative; width: 940px; /Resolução mais usada para ficar numa boa média/ margin: 0 auto;

}

nav { position: absolute; top: 110px; right: 0; }

nav li { display: inline; margin: 0 0 0 15px; /cima, direita, baixo, esquerda (15px)/ }

nav a { text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }

nav a:hover { color: #C78C19; 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; /* Primeira posição Altura, segunda posição Largura/ box-sizing: border-box; /Fixa a altura e largura definida para não quebrar*/ border: 2px solid #000000; border-radius: 10px; }

.produtos li:hover { border-color: #C78C19; font-size: 40px; }

.produtos li:active { border-color: #088C19; }

.produtos li:hover h2 { font-size: 34px; }

.produtos h2 { font-size: 30px; font-weight: bold; }

.produto-descricao { font-size: 18px;

}

.produto-preco { font-size: 22px; font-weight: bold; margin-top: 10px; }

footer { text-align: center; background: url("bg.jpg"); padding: 40px 0; }

.copyright { color: #FFFFFF; font-size: 13px; margin: 20px 0 0; }

Alan, percebi que ele empurra o <footer> para baixo quando acontece o efeito do hover, você pode adicionar essas três linhas de código:

     position: absolute;
     bottom: 0;
     width: 100%;

Para manter o <footer> na posição absoluta e em baixo assim ele fica independente e não será mais afetado.

footer {
    position: absolute;             
    bottom: 0;
    width: 100%;
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;

}

Testa ai e me fala, por favor. Valeu Alan.

Eu acho que você está com um mesmo problema que eu tive. Antes um elemento com hover ou active que aumenta o tamanho movia toda a página pra baixo. Tipo isso:

Na época o código estava assim:

.painel-superior{
    position: relative;
    padding: 20px;
    padding-left: 200px;
    width: 940px;
    margin: 0 auto;
}

Aí eu adicionei uma altura na linha do elemento, dando mais espaço para o hover e active, então resolveu o problema e ficou assim:

Quando adicionei uma altura o código ficou assim:

.painel-superior{
    position: relative;
    padding: 20px;
    padding-left: 200px;
    width: 940px;
    margin: 0 auto;
    height: 212px;
}

Tentando a solução do Renan, o footer acaba cobrindo o main. O que resolveu foi definir uma altura, como a Letícia sugeriu.

Segue o trecho do código:

.produtos { width: 940px; height: 460px; margin: 0 auto; padding: 50px 0; }

Muito obrigado!