.produtos li {
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border:#000000 2px solid;
border-radius: 10px;
}
na aula assim que o professor coloca a margin: 0 1.5% todos os itens ficam perfeitamente alinhados. Mas eu não consegui entender muito bem o porque isso acontece. Alguém sabe me dar uma boa definição?
Olá,
Isso acontece nesse curso pelo seguinte :
O card dele possui um tamanho de 30% (width: 30%;) mais a margem do lado de 1.5% para cada lado ( margin: 0 1.5%;).
Ou seja esse card vai ocupar 33% (30 + 1.5 + 1.5), e como são 3 card (33+33+33) acaba dando os 99% da tela. por isso fica alinhado.
Espero ter conseguido explicar de uma forma que dê para entender kkk.