Olá, pessoal. Não estou conseguindo deixar a página de contato responsiva, tentei várias mudanças mas não consegui resolver. A página inicial e a de produtos está funcionando perfeitamente, só a de contato que não funciona. Vou mandar meu código pra vocês analisarem:
CSS
@media screen and (max-width: 480px) {
.cabecalho, .principal, .conteudo-beneficios, .mapa-conteudo, .video, .produtos, .form-contato, .input-padrao, .tabela {
width: auto;
}
h1 {
text-align: center;
}
nav {
position: static;
text-align: center;
}
.principal p {
margin-left: 5px;
margin-right: 10px;
}
.lista-beneficios, .imagem-beneficios {
width: 100%;
}
.itens {
margin-left: 1em;
}
.itens:last-child {
margin-bottom: 1em;
}
.produtos li {
margin-bottom: 20px;
display: block;
}
.form-contato, .produtos li {
width: auto;
padding: 1em;
}
}
pra caber aqui, vou colocar só o head e o main da página de contato HTML - head
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Contato - Barbearia Alura</title>
</head>
HTML - main
<main>
<section class="form-contato">
<form action="" class="form-control">
<label for="nome" id="nome">Nome Completo:</label>
<input type="text" id="nome" class="input-padrao" required>
<label for="email" id="email">E-mail:</label>
<input type="email" id="email" class="input-padrao" placeholder="email@dominio.com.br" required>
<label for="telefone" id="telefone">Telefone:</label>
<input type="tel" id="telefone" placeholder="(XX) XXXXX-XXXX" class="input-padrao" required>
<label for="mensagem" id="mensagem">Mensagem:</label>
<textarea name="mensagem" id="mensagem" rows="5" placeholder="Digite sua mensagem aqui..." required></textarea>
<fieldset class="preferencia-contato">
<legend>Como prefere receber o nosso contato?</legend>
<label for="radio-email"> <input type="radio" name="contato" id="radio-email" value="email"> E-mail</label>
<label for="radio-whatsapp"> <input type="radio" name="contato" id="radio-whatsapp" value="whatsapp" checked> WhatsApp</label>
<label for="radio-telefone"> <input type="radio" name="contato" id="radio-telefone" value="telefone"> Telefone</label>
</fieldset>
<fieldset id="contato">
<legend>Qual horário prefere ser atendido?</legend>
<select name="hora-atendimento" id="hora-atendimento">
<option value="manha">Manhã</option>
<option value="tarde">Tarde</option>
<option value="noite">Noite</option>
</select>
</fieldset>
<label for="newsletter"><input type="checkbox" name="newsletter" id="newsletter" class="input-checkbox" checked> Gostaria de receber nossas novidades por e-mail?</label>
<input type="submit" class="btn-enviar" value="Enviar Formulário">
</form>
</section>
<section class="tabela">
<table>
<thead>
<tr>
<th>Dia</th>
<th>Horário</th>
</tr>
</thead>
<tbody>
<tr>
<td>Segunda</td>
<td>08h ~ 20h</td>
</tr>
<tr>
<td>Quarta</td>
<td>08h ~ 20h</td>
</tr>
<tr>
<td>Sexta</td>
<td>08h ~ 20h</td>
</tr>
</tbody>
</table>
</section>
</main>
O que estou fazendo de errado?