Minha versão mobile não atualiza

Olá, Jeanine.

Tudo bem?

Olhando o seu código percebi que tem alguns erros de digitação, no caso depois da classe .video tem um ponto e vírgula sendo que era para ter a abertura de chaves para aplicar o width: auto; e também faltou o fechamento do @media screen veja corrigido:

@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%;
    }

}

Espero ter ajudado de alguma forma. Qualquer dúvida manda aqui. Valeu.

Corrigi o que você notou de erro, mas ainda assim não mudou a aparencia :(

Também estou passando pela mesma situação :/

Consegui solucionar o meu caso, eu havia escrito widht ao invés de width, dentro da meta na head... e isso já corrigiu o site, depois eu dei continuidade no video e funcionou tudo certinho.

<meta name="viewport" content="width=device-width">

Vê se funciona contigo e passa um feedback, por gentileza.

Se caso ainda não funcionar, indicaria pegar o projeto finalizado do professor e comparada com o seu: Link do projeto

Oi Diogo! A digitação do meta estava correta mas a pontuação errada! Eu coloquei um . ao invés do - no "device-width" Obrigada pela ajuda!