Na pagina inicial a imagem benefícios não se adapta a nova formatação, sempre fica estourando os limites estabelecidos pelo @media. Ja tentei declarar o bloco .beneficios e não rolou também. O mesmo ocorre para a sessão de produtos.
Segue o .css completo
body {
font-family: 'JetBrains Mono', monospace;
}
header {
background: #bbbbbb;
padding: 20px 0;
background-size: auto;
}
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
nav {
position: absolute;
top: 110px;
right: 0;
}
nav li {
display: inline;
margin: 0 0 0 15px;
}
nav a {
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover {
color: #c79c19;
text-decoration: underline;
}
.produtos {
width: 940px;
margin: 0 auto;
padding: 50px 0;
}
.produtos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid #000000;
border-radius: 15px;
}
.produtos li:hover {
border-color: #c79c19;
}
.produtos li:active {
border-color: #088c19
}
.produtos li:hover h2 {
font-size: 36px;
}
.produtos h2{
font-size: 30px;
font-weight: bold;
}
.produtos-descricao {
font-size: 18px;
}
.produtos-preco {
font-size: 22px;
font-weight: bold;
margin: 10px 0 0;
}
footer {
text-align: center;
background: url("bg.jpg");
padding: 40px 0px;
text color: #bbbbbb;
}
.copyleft {
color: #ffffff;
font-size: 12px;
margin: 20px 0px;
}
main {
}
form {
margin: 40px 0;
padding: ;
}
form label, form legend {
display: block;
font-size: 20px;
margin: 0 0 10px;
}
.input.padrao {
display: block;
margin: 0 0 20px;
padding: 10px 25px;
width: 50%;
}
.checkbox {
margin: 20px 0;
}
.enviar {
width: 40%;
padding: 15px 0;
background: orange;
color: white;
font-weight: bold;
font-size: 18px;
border: none;
border-radius: 10px;
transition: 2s all;
cursor: pointer;
}
.enviar:hover {
background: orangered;
transform: scale(1.2);
}
table {
margin: 20px 0;
}
thead {
background: #6e6e6e;
color: #ffffff;
font-weight: bold;
}
td, th{
border: 1px solid #000000;
padding: 8px 15px;
}
.banner {
width: 100%;
}
.texto-especial {
text-align: center;
font-size: 2em;
margin: 0 0 1em;
clear: left;
font-family: 'Russo One', sans-serif;
color: rgba(0, 0, 0, 0.4);
}
.texto-especial:hover {
color: rgba(0, 0, 0, 1);
transition: 300ms;
text-shadow: 2px 2px #d3c4c4
}
.sobre {
padding: 3em 0;
background: #fefefe;
width: 940px;
margin: 0 auto;
}
.sobre p {
margin: 0 0 1em;
}
.sobre strong {
font-weight: bold;
}
.sobre em {
font-style: italic;
}
.utensilios {
width: 14%;
float: left;
margin: 0 20px 20px 0;
}
.mapa {
padding: 3em 0;
background: linear-gradient( #fefefe, #888888)
}
.mapa p{
margin: 0 0 2em;
text-align: center;
}
.mapa-conteudo {
width: 940px;
margin: 0 auto;
}
.beneficios {
padding: 3em 0;
background: #888888;
}
.tabela-beneficios {
width: 640px;
margin: auto;
}
.lista-beneficios {
width: 40%;
display: inline-block;
vertical-align: top;
}
.itens {
line-height: 2;
}
.itens:nth-child(2n) {
font-weight: bold;
}
.itens:before {
content:"✵";
}
.imgbebeficios {
width: 50%;
opacity: 0.6;
box-shadow: 10px 10px 10px 0 #000000;
}
.imgbebeficios:hover {
opacity: 1;
transition: 500ms;
}
.video {
width: 560px;
margin: 2em auto;
}
@media screen and (max-width: 480px) {
.caixa, .sobre, .lista-beneficios, .mapa-conteudo, .video, .imgbebeficios {
width: auto;
}
h1 {
text-align: center;
}
nav {
position: static;
}
.lista-beneficios, .imgbebeficios {
width: 100%;
}
}
OBS: Já usei a tag meta viewport em todos os arquivos HTML