Sei que já houve pergunta parecida, mas não foi respondida e, como já faz tempo, o próprio site sugeriu criar nova demanda.
Não tive problemas para acertar o media da parte principal do site, como o prof ensinou na aula. Porém, no "dever de casa", de adequar também a seção Produtos para telas menores, não consigo.
O HTML está idêntico. O CSS tentei aplicar primeiro os mais "fáceis" - 'header' e 'footer', mas não deu certo. 1o tentei o texto igual ao prof, depois mexi para ver se conseguia: fui alterando width (auto, 100% etc.), position, display, margin, mas não adiantou.
Obs: no meu código, 'caixa' é 'box' e 'footer' é 'rodape'.
Segue a imagem da comparação: https://ibb.co/KD6BmCt
Se precisar de mais código, copio ele todo aqui.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" type="text/css" href="produtos.css">
</head>
<body>
<header>
<div class="box">
<h1><img src="logo.png"></h1>
<nav>
<ul>
<li><a href="barbearia.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
CSS:
@media screen and (max-width: 480px){
.box{
width: 100%;
display: flex;
margin: 0 auto;
}
nav{
position: static;
}
.rodape{
width: auto;
height: auto;
margin: 0 auto;
}
}
