.produtos li { display: inline-block} não esta funcionando

Minhas imagens não estão ficando lado a lado. Alguém saberia o pq?

HTML

    <div class="caixa">
        <h1><img src="logo.png" alt="logomarca"></h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
    </div>

</header>

<main>
    <ul class="produtos">

    <li>
        <h2>Cabelo</h2>
        <img src="cabelo.jpg" alt="cabelo">
        <p>Na tesoura ou máquina, como o cliente prefererir </p>
        <p>R$ 25,00</p>
    </li>

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

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

</ul>
</main>

CSS

header{ background:#bbbbbb ; padding: 20px 0 ;

}

.caixa{ position: relative; width: 940px; margin: 0 auto; }

nav{ position: absolute; top: 110px; right: 0;

}

nav li { display: inline; margin:0 0 0 15px; }

nav a { text-transform:uppercase ; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }

.produtos li { display: inline-block;

}