.produtos {
width: 940px;
margin: 0 auto;
padding: 50px 0;
}
.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: 2px solid #000000;
}
.produtos h2 {
font-size: 30px;
font-weight: bold;
}
.produto-descrição {
font-size: 18px;
}
.produto-preco {
font-size: 22px;
font-weight: bold;
margin-top: 10px;
}hoje, com a Alura e o Google Gemini
Oi, Matteus, tudo bem?
Adiciona essa linha de estilização border-radius: 10px; dentro da classe .produtos li. Testa e me fala se resolve essa diferença :}
Boa Tarde Laís,
Adicionado e testado, porém continua com a mesma diferença de tamanho. =/
Oi, Matteus, verifica se no seu htlm da página produtos, dentro da tag onde está o cabelo+barba está adicionada as classe corretamente como as demais?
Estão iguais Laís, segue código html de produtos:
<main>
<ul class="produtos">
<li>
<h2>Cabelo</h2>
<img src="cabelo.jpg">
<p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
<p class="produto-preco">R$ 25,00</p>
</li>
<li>
<h2>Barba</h2>
<img src="barba.jpg">
<p class="produto-descricao">Corte e desenho profissional de barba</p>
<p class="produto-preco">R$ 18,00</p>
</li>
<li>
<h2>Cabelo + Barba</h2>
<img src="cabelo+barba.jpg">
<p class="produto-descricao">Pacote completo de cabelo e barba</p>
<p class="produto-preco">R$ 35,00</p>
</li>
</ul>
</main>Oi, Matteus, tudo bem?
Eu testei os trechos dos códigos que você me passou e as imagens ficaram centralizadas, tirei um print: https://imgur.com/a/NdbwiuC
Mas vale lembrar que o restante do código eu utilizei o do projeto do curso, então, pode ser que alguma diferença que poder haver entre o sue código com o que o instrutor passou. Verifique, teste e me fala se achou a diferença :}