Solucionado
Olá.
No CSS de "banner" temos o seguinte código:
.banner {
width: 100%;
}Já na media query temos:
@media screen and (max-width: 480px) {
.caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video {
width: auto;
}
Qual seria a diferença entre esses width? Por quê não 100% no segundo width?
Por padrão, a largura inicial dos elementos de blocos, como div e p, é automática. Isso faz com que ele se expanda para ocupar todo o espaço horizontal disponível.
Agora, se você especificar "width: 100;", a largura total de elemento será 100% do seu bloco de contenção mais a margem horizontal, preenchimento e bordas (a menos que você tenha usado o "box-sizing: border-box;", nesse caso só as margens serão adicionadas aos 100%).