display: inline-block não alterou

Olá. Eu estava fazendo meu exercício junto com o professor e ao inserir o código abaixo para fazer com que os itens da lista fiquem lado a lado não houve alteração alguma na minha lista:

Código no css:

.produtos li {
    display: inline-block;
}

Código no html:

        <main>
            <ul class="produtos">
                <li>
                    <h2>Cabelo</h2>
                    <img src="cabelo.jpg">
                    <p>Tesoura ou máquina</p>
                    <p>R$ 25,00</p>
                </li>
                <li>
                    <h2>Barba</h2>
                    <img src="barba.jpg">
                    <p>Corte e desenho profissional</p>
                    <p>R$ 18,00</p>
                </li>
                <li>
                    <h2>Cabelo + Barba</h2>
                    <img src="cabelo+barba.jpg">
                    <p>Pacote completo</p>
                    <p>R$ 35,00</p>
                </li>
            </ul>
        </main>

Qualquer ajuda ou explicação é bem vinda!