[Dúvida] Minhas imagens dos produtos não ficam uma do lado da outra, e não sei o que tem de errado.

HTML:

<main>
        <ul class="produtos">
            <li><h2>Cabelo</h2></li>
            <img src="imagens/cabelo.jpg">
            <p>Na tesoura ou máquina, como o cliente preferir.</p>
            <p>R$ 25,00</p>


            <li><h2>Barba</h2></li>
            <img src="imagens/barba.jpg">
            <p>Corte e desenho profissional de barba.</p>
            <p>R$ 18,00</p>

            <li><h2>Cabelo + Barba</h2></li>
            <img src="imagens/cabelo+barba.jpg">
            <p>Corte completo de cabelo e barba.</p>
            <p>R$ 35,00</p>

        </ul>
    </main>

CSS:

.produtos {
    width: 940px;
    margin: 0 auto;
    }

.produtos li{
    display: inline-block;
}