Boa Tarde! Não estou conseguindo acertar o meu header. Ao inserir a @Midia screen percebo que ele pega em todos os elementos, menos na "div caixa", fazendo com que a minha "caixa" ainda fique com 940px da configuração anterior. Porém todos os outros elementos recebem a configuração do @midia normalmente e passam a ter o "width: auto ". Ao análisar o inspetor percebi que é isso mesmo que acontece. Somente o "width:auto" da "div caixa" não é aplicada.
Alguém poderia me ajudar por favor?
.caixa{
position: relative;
width: 940px;
margin: 0 auto;
}
----------------------------------------------------------------------------
@media screen and (max-width: 480px) {
.caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video {
width: auto;
}
---> Aqui o "width: auto" aplica em todos os elementos menos na "div caixa", mantendo os 940px anterior
h1 {
text-align: center;
}
nav {
position: static;
}
.lista-beneficios, .imagem-beneficios {
width: 100%;
}
}
-----------------------------------------------------------------
<body>
<header>
<div class="caixa">
<h1><img src="./imagens_pag_produtos/logo.png" alt="imagem logo"></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>
