Olá, Ana.

Tudo bem?

Está certinho! É isso mesmo, só faltou você definir um tamanho no caso a largura de .produtos li e colocar as margens para separar.

Eu corrigi abaixo, coloquei um width: 80%; e a margem margin: 2em auto; na classe .produtos li, veja:

@media screen and (max-width: 480px) {
    .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video {
        width: auto;
    }

    h1 {
        text-align: center;
    }

    nav {
        position: static;
    }

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

    /*responsividade tela produtos*/

    .produtos {
        width: 100%;
    }

    .produtos li {
        text-align: center;
        display: block;
        width: 80%;
        margin: 2em auto;
    }
} 

Resultado:

Espero ter ajudado. Qualquer dúvida manda aqui de novo. Valeu Ana.

Muito obrigada! Achei que estava bem distante da resolução rsrsrs Deu certinho! Valeu!