Solucionado
print de como esta https://prnt.sc/1ui43ew
@media screen and (max-width: 480px) {
.caixa, .produtos, .produto-descricao, .produto-preco {
width: auto;
}
h1 {
text-align: center;
}
nav {
position: static;
}
.produtos {
position: absolute;
}
}
Olá Juan, tudo bem?
O que está fazendo com que os elementos fiquem sobrepostos é o position: absolute.
Caso esteja querendo que o layout da página de produtos se apresente dessa maneira:
Retire o position: abosolute do .produtos e modifique o .produtos li acrescentando as seguintes propriedades:
.produtos li {
display: block;
width: 100%;
margin: 20px auto;
}Espero ter ajudado, qualquer dúvida fique a vontade para perguntar. Bons estudos!