@media screen and (max-width: 480px) {
.caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video {
width: auto;
}
.produtos li{
display: inline-table;
margin: 25px 10px 0 10px;
}
h1 {
text-align: center;
}
nav {
position: static;
}
.lista-beneficios, .imagem-beneficios {
witdh: 100%;
}
form, fieldset, table {
margin:40px 10px 10px;
}
.input-padrao{
width: 70%;
}
.enviar{
width:auto;
}
hoje, com a Alura e o Google Gemini
Boa tarde, Halyne.
Com exceção da parte do código display: inline-table;, o que eu imagino que seria display: inline-block, o seu código está certinho.
O problema pode estar no código HTML mesmo, em que você pode ter se esquecido de referenciar no código o comando que promove a detecção da resolução do dispositivo e, consequentemente, habilitação da parte responsiva do design de sua página: <meta name="viewport" content="width=device-width">
Também pode ser na referência do CSS no código HTML, por meio do <link rel="stylesheet" href=" ">.
Caso não sejam estes o problema, você pode compartilhar o seu código conosco para poder analisar de uma melhor forma.
Espero ter ajudado. Qualquer dúvida estou à disposição.
obrigada.