Eu fiz algumas alterações no seu código para que você consiga por seus produtos da lista lado a lado.
Adicionei uma classe à cada tag <li>, alterei a posição do fechamento das tags </li> , coloquei elas no final de cada descrição de produto, dessa forma estamos avisando ao navegador que cada produto é um item da nossa lista, antes você estava dizendo que apenas as tags <h2> eram itens da lista e deixando toda a descrição do produto "soltas" nas tags <ul>.
<ul class="produtos">
<li class="produtos_lista"><h2>cabelo</h2>
<img src="cabelo.jpg">
<p>Na tesoura ou máquina, como o cliente preferir</p>
<p>R$ 25,00</p></li>
<li class="produtos_lista"><h2>barba</h2>
<img src="barba.jpg">
<p>Corte e desenho profissional de barba</p>
<p>R$18,00</p></li>
<li class="produtos_lista"><h2>cabelo+barba</h2>
<img src="cabelo+barba.jpg">
<p>Pacote completo de cabelo e barba</p>
<p>R$35,00</p></li>
</ul>
Agora você pode copiar o código a baixo e treinar com ele, faça algumas modificações para poder entender melhor o código:
.produtos {
text-align: justify;
}
/* Aqui a gente adiciona espaço entre nossos produtos,
evitando que fiquem grudados um no outro */
.produtos::after {
content: '';
display: inline-block;
width: 100%;
height: 0;
}
.produtos_lista {
width: 25%;
height: 150px;
display: inline-block;
}
