Não estou conseguindo colocar as imagens uma ao lado da outra. Mesmo eu passando a propriedade da classe com in...

Meu HTML esta assim:

    <ul class="cardapio">
        <li>
            <h2>Massas</h2>
            <img src="img/pizza.jpg" class="massas">
            <p>Massas feitas por chefes renomados.</p>
        </li>
        <li>
            <h2>Carnes</h2>
            <img src="img/picanha.jpg" class="carnes">
            <p>Carnes assadas no fogo de chão como manda um bom churrasco.</p>
        </li>
        <li>
            <h2>Sobremesas</h2>
            <img src="img/panquecas.jpg" class="sobremesas">
            <p>Sobremesas reconhecidas mundialmente por serem deliciosas.</p>
        </li>
    </ul>

</main>

O meu css está assim: .topo_pagina { background-color: red; padding: 20px 0; }

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

    .barra_navegacao {
        position: absolute;
        top: 50px;
        right: 0%;
    }

    .logo {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 0%;
    }

    .link_itens {
        text-transform: uppercase;
        color: black;
        font-weight: bold;
        font-size: 20px;
        text-decoration: none;
        margin: 15px;
    }

    .itens_navegacao {
        display: inline;
    }

    .cardapio {
        width: 940px;
        position: relative;
        margin: 0 auto;
        text-align: center;
        display: inline-block;
    }

    .massas {
        width: 20%;
        position: absolute;
    }

    .carnes {
        width: 20%;
        position: absolute;
    }

    .sobremesas {
        width: 20%;
        position: absolute;