@correlucas
Posted
👾Fala Gleidson fagno, tudo bem? Parabéns pelo seu primeiro desafio e seja bem vinda a comunidade do Frontend Mentor!
1.A primeira coisa que você tem que fazer é adicionar algumas propriedades pro body, primeiro adicionamos display: flex e flex-direction: column pra alinhar tudo na vertical. Depois adicione min-height: 100vh (isso vai fazer com que o body tenha 100% da tela como tamanho) e com isso o elemento filho (no caso o container) vai se alinhar ao tamanho dele, no caso 100% da tela, dessa forma ele ficará centralizado, entendeu?
Acabei de ver sua solução e acho que ela está bem completa, tenho algumas dicas pra você:
REMOVER O PADDING E MARGIM PRA FAZER O ALINHAMENTO:
.principal {
max-width: 320px;
/* margin: auto; */
/* padding-top: 50px; */
}
ADD ESSAS PROPRIEDADES PRA ALINHAR:
body {
MIN-HEIGHT: 100VH;
background-color: hsl(212, 45%, 89%);
display: flex;
align-items: center;
justify-content: center;
}
👋 Espero ter ajudado e continue no foco!
