Olá pessoal, sou novo no fórum. Terminei o curso hoje e estou com uma dúvida. Na lista "Cabelo" dentro do meu
não está do mesmo tamanho das outras duas listas. Segue Imagem. Tentei fixar a altura. Resolve o problema, porém quando passo o mouse não é aplicado o efeito do do "hover".
Segue Código:
<main>
<ul class="produtos">
<li>
<h2>Cabelo</h2>
<img src="cabelo.jpg">
<p class="descricao-produto">Na tesoura ou máquina, como o cliente preferir.</p>
<p class="preco">R$25,00</p>
</li>
<li>
<h2>Barba</h2>
<img src="barba.jpg">
<p class="descricao-produto">Corte e desenho profissional de barba.</p>
<p class="preco">R$18,00</p>
</li>
<li>
<h2>Cabelo + Barba</h2>
<img src="cabelo+barba.jpg">
<p class="descricao-produto">Pacote completo de cabelo e barba.</p>
<p class="preco">35,00</p>
</li>
</ul>
</main>`
.produtos{
font-size: 0px;
width: 1100px;
margin: 0 auto;
padding: 50px 20px;} .produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 50px 20px; box-sizing: border-box; border: solid 2px #000000; border-radius: 10px; } `
