Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Pessoal, sabe o que está errado aqui no meu código? Ele fica assim, com a primeira caixa desalinhada.
Meu código está assim:
.produtos {
width: 940px;
margin: 0 auto;
}
.produtos li {
display: inline-block;
text-align: center;
width: 30%;
}
.produtos h2 {
font-size: 30px;
font-weight: bold;
}
por padrão o CSS alinha as caixas pelo fundo você precisa passar pro CSS que você quer alinhar pelo topo, adicionando vertical-align: top ficando assim
.produtos li {
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
}