Ajuda para deixar responsivo a pagina produto | HTML5 e CSS3 parte 4: avançando no CSS

Boa noite.. eu nao estou conseguindo deixar a pagina produtos responsivo, a parte do meio aonde fica mostrando os produtos não fica alinha.

Cheguei a fazer uns testes colocando classes em cada um mas também não deu certo. Alguém poderia ajudar ?

<!DOCTYPE  html>

<html>

    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">    
        <title> Produtos - Barbearia Alura </title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="caixa">
            <h1><img src="produtos/logo.png"></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>

        <main>
            <ul class="produtos">
                <li class="protuto-um">
                    <h2 class="produto-titulo">Cabelo</h2>
                    <img src="produtos/cabelo.jpg" class="produto-imagem">
                    <p class="produto-descricao">Na tesoura ou na máquina, como o cloente preferir</p>
                    <p class="produto-preco">R$ 25,00</p>
                </li>
                <li class="protuto-dois">
                    <h2 class="produto-titulo">Barba</h2>
                    <img src="produtos/barba.jpg" class="produto-imagem">
                    <p class="produto-descricao">Corte e desenho profissional de barba</p>
                    <p class="produto-preco">R$ 18,00</p>
                </li>
                <li class="protuto-tres">
                    <h2 class="produto-titulo">Cabelo + Barba</h2>
                    <img src="produtos/cabelo+barba.jpg" class="produto-imagem">
                    <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="produtos/logo-branco.png">
            <p class="copyright">&copy; Copyright Barbearia Alura - 2022 </p>
        </footer>
    </body>
</html>

Aqui está o style apenas da parte ainda converte para o celular, pois se não, não ia caber na mensagem.

@media screen and (max-width: 480px){


    .caixa, .principal-caixa, .conteudo-beneficios, .mapa-coenteudo{
        width: auto;
    }
    .video {
        width: 90%;

    }
    .imagem-beneficios, .lista-beneficios {
        width: 100%;

    }


    h1 {
        text-align: center;
    }
    nav {
        position: static;
        text-align: center;    
    }

    /* produto */



     /* CONTATO*/

     .questionario, .questionario-caixa  {
         width: auto;

     }
     .input-padrao, form {
         width: auto;
         margin: 0 0 20px 10px;

     }
     .mensagem{
         width: 20%;
     }

}

Mergulhe em programação