Olá, pessoal. Gostaria da ajuda de vocês.
Na aula sobre posicionamento, não consegui dar um espaçamento correto usando align-items: space-between. Aliás, até consigo, mas quando coloco margin: 10% os elementos se juntam novamente e forma um scroll na página. Seguem prints...
Primeiramente só com align-items:
Agora quando coloco o margin: 10%;
Segue abaixo link do repositório.
https://github.com/romariolo/projeto-ONE.git
Desde já agradeço.
Entendi a parada com o align-items: space-between. Realmente, quando jogamos um margin: 10%; na mistura, as coisas podem sair dos trilhos!
Uma alternativa que costuma funcionar bem é brincar com padding nos elementos filhos do contêiner. Assim você cria o espaço entre eles sem bagunçar a festa. Também é legal definir um max-width pro contêiner pra evitar que os elementos se espalhem demais.
Dá uma olhada nesse trecho de código CSS que talvez possa te ajudar:
.container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%; /* Você adiciona espaço nas laterais */
max-width: 1200px; /* E também limita a largura do contêiner */
margin: 0 auto; /* E centraliza o contêiner */
}
.item {
/* Estilos para os itens */
}
E certifique-se de que todos os elementos estejam dentro do contêiner com a classe .container. Espero ter te ajudado de alguma forma