Fiz conforme foi falando no curso, mas a margin dos elementos não estão sendo processadas, neste caso seria no .apresentacao, continua tudo nos cantos da tela. Como faço para corrigir ?
Solucionado
Fiz conforme foi falando no curso, mas a margin dos elementos não estão sendo processadas, neste caso seria no .apresentacao, continua tudo nos cantos da tela. Como faço para corrigir ?
Olá Amanda! Tudo bem?
Poderia compartilhar aqui o seu código html e css?
Assim tornaria mais fácil identificar o erro e encontrar uma solução para lhe ajudar!
Oi Nataly, tudo ótimo e com você ?
Segue os códigos abaixo:
Olá! Sou Amanda Almeida, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?
CSS
@import url("https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap");
body { height: 100vh; box-sizing: border-box; background-color: #000000; color: #f6f6f6; }
.titulo-destaque { color: #22d4fd; }
.apresentacao { margin: 10%, 15%; display: flex; align-items: center; justify-content: space-between; } .apresentacao__conteudo { width: 615px; display: flex; flex-direction: column; gap: 40px; }
.apresentacao__conteudo__titulo { font-size: 36px; font-family: "Krona One", sans-serif; }
.apresentacao__conteudo__texto { font-size: 24px; font-family: "Montserrat", sans-serif; }
.apresentacao__links { display: flex; justify-content: space-between; }
.apresentacao__links__link { background-color: #22d4fd; width: 280px; text-align: center; border-radius: 16px; font-size: 24px; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: #000000; font-family: "Montserrat", sans-serif; }
Olá novamente, Amanda! Estou bem também.
O problema que você está enfrentando com a margem no .apresentacao pode estar relacionado à forma como você está definindo as margens no CSS! No seu código, você está usando uma vírgula para separar os valores da margem, o que não é a sintaxe correta para definir margens no CSS.
No CSS, as margens são definidas usando espaços ou barras para separar os valores, dependendo do contexto. Para definir margens diferentes para os lados superior, direito, inferior e esquerdo, você deve usar a seguinte sintaxe:
margin: top right bottom left;
No seu caso, você quer definir margens diferentes para os lados superior/inferior e esquerdo/direito. Portanto, você deve usar a seguinte sintaxe:
.apresentacao {
margin: 10% 15%;
display: flex;
align-items: center;
justify-content: space-between;
}
Com essas correções, o código deve funcionar corretamente agora!
Espero ter ajudado, e bons estudos!
Eita, que eu vacilei!
Funcionou! obrigadaaa!
Imagina, se tiver mais alguma dúvida é só comentar!