Solucionado
Esse código é apenas um exemplo de que todas as vezes que utilizo "margin", no CSS, ele não funciona. Por exemplo, quando tive de dar espaço entre o conteúdo do cabeçalho com o topo do navegador ele não funcionou, ou agora que preciso dar um espaço nos formulários, ele também não funciona.
main {
width: 940px;
margin: 0 auto;
}
form {
margin: 40px 0;
}hoje, com a Alura e o Google Gemini
Olá Pedro!
Você está importando o arquivo CSS no seu documento HTML?
Olá Matheus. Sim, tudo funciona normalmente, mas em momentos específicos com o Margin e o Padding não, por exemplo:
footer { text-align: center; background: url('bg.jpg'); padding: 40px 0; }
Ps: Mesmo mudando esse valor "40" não ocorre alteração nenhuma.
Ou então aqui:
header { background: #BBBBBB; padding: 20px 0; }
Oi Pedro!
Só para entender um pouco melhor. Você está usando as propriedades em algum outro lugar do projeto ou algum outro seletor diferente que usa essas propriedades?
Eu fiz um teste aqui usando o seu código no codepen e não tive os mesmos problemas. Se puder mandar o seu projeto inteiro para eu dar uma olhada.
Vou mandar aqui o código que montei no codepen: https://codepen.io/ikyrie/pen/VwewGqj
Abraços.
Olá Matheus!
Eu vi que está aparecendo isso no console:
Estou seguindo o passo a passo do instrutor.
Olá Pedro!
Pelo o que estou vendo o reset.css que você está usando está sendo importado por último ou depois do seu arquivo de estilos.
Como o peso dos seletores que você está usando para colocar o margin: 0 auto é de peso 1 e o peso dos seletores do reset.css também é peso 1, quem vem por último é quem prevalece.
A solução é mudar a ordem do import do CSS Reset, fazer o reset ser o primeiro arquivo CSS a ser importado.
Se não funcionar eu peço que mande o seu projeto para ver melhor o que pode estar errado.
Um abraço!
Ola Matheus!
Deu certo. Era realmente a ordem dos links no HTML. Muito obrigado pela ajuda.