Consolidando Conhecimentos

HTML

<main>
<ul class="produto">

<li>
    <h2>Cabelo</h2>
    <img src="cabelo.jpg" alt="">
    <p class="produto-descricao">Na tesoura ou maquina, como o cliente preferir</p>
    <p class="produto-preco">R$25,00</p>
</li>

<li>
    <h2>Barba</h2>
    <img src="barba.jpg" alt="">
    <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" alt="">
    <p class="produto-descricao">Pacote completo de cabelo e barba</p>
    <p class="produto-preco">R$35,00</p>
</li>

</ul>
</main>

CSS

.produto {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.produto li {
     display: inline-block;
     text-align: center;
     width: 30%;
     vertical-align: top;
     margin: 0 1.5%;
     padding: 30px 20px;
     box-sizing: border-box;

     }

.produto h2 {
    font-size: 30px;    
    font-weight: bold;    
}

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}