Como alinhar as imagens da minha lista? | Front-end | Alura

Boa tarde! Gostaria de saber como faço para alinhar as imagens, ou melhor, as li uma acima da outra, de forma que fiquem três em cada linha na página?

Aguardo retorno, obrigada.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Receitas Saudáveis</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
    <h1>Receitinhas Saudáveis</h1>
    <p>Aprenda receitas fáceis e saudáveis para o seu dia a dia!</p>
    </header>
    <ul>
        <li><a href="#">Sobre</a></li>
        <li class="menu">
            <a href="#" class="botao">Categorias</a>
            <div class="opcoes">
                <a href="#">Salgados</a>
                <a href="#">Doces</a>
                <a href="#">Bebidas</a>
            </div>
        </li>
        <li><a href="#">Contato</a></li>
    </ul>

    <main>
        <ul class="receitas-inicio">
            <li>
                <h2>Bolo de banana</h2>
                <img src="imagens/banana_cake.jpg" alt="Bolo de banana">
            </li>
            <li>
                <h2>Pão de Queijo Fit</h2>
                <img src="imagens/pao_queijo.jpeg" alt="Pão de queijo">
            </li>
            <li>
                <h2>Pizza Fit</h2>
                <img src="imagens/pizza_fit.jpeg" alt="Pizza fit">
            </li>
            <li>
                <h2>Shake de Café</h2>
                <img src="imagens/shake_cafe.jpeg" alt="Shake de Café">
            </li>
            <li>
                <h2>Mousse Fit</h2>
                <img src="imagens/mousse_fit.jpeg" alt="Mousse de Chocolate">
            </li>
            <li>
                <h2>Muffin</h2>
                <img src="imagens/muffin_chocolate.jpeg" alt="Muffin de chocolate">
            </li>
        </ul>

    </main>

    <footer>
        <p>Site criado por <a href="https://github.com/aleesantana" target="_blank">Alessandra Elisa Santana</a>.</p>
    </footer> 
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

:root {
    --cor0: #E6F7D0;
    --cor1: #FA922D;
    --cor2: #FA8514;
    --cor3: #84D8F0;
    --cor4: #c9edf7;
    --cor5: #E26BFA;

    --fonte-titulo: 'Sacramento', cursive;
    --fonte-titulo2: 'Amatic SC', sans-serif;
    --fonte-padrao: Arial, Verdana, Helvetica, sans-serif;
    --fonte-texto: 'Tinos', sans-serif;
    --fonte-subtitulo: 'Satisfy', sans-serif;
}

header {
    background-image: linear-gradient(to bottom, #84D8F0,#c9edf7);
    text-align: center;
    padding: 15px;
}

header h1 {
    color: var(--cor2);
    font-family: var(--fonte-titulo2);
    font-size: 3em;
}

header p {
    font-family: var(--fonte-subtitulo);
    font-size: 1.2em;
    margin-top: 0.5px;
}

ul {
    list-style-type: none;
    background-color: var(--cor4);
    font-family: var(--fonte-texto);
    font-weight: bold;
    display: flex;
    justify-content: center;

}

li {
    display: inline;
}

li a, .botao {
    display: inline-block;
    color: black;
    padding: 14px 16px;
    text-decoration: none;
}

li.menu {
    display: inline-block;
}

.opcoes {
    display: none;
    position: absolute;
    background-color: var(--cor2);
    min-width: 160px;
}

.opcoes a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.opcoes a:hover {
    background-color: var(--cor1);
    color: white;
}

.menu:hover .opcoes {
    display: block;
    border-radius: 4px;
}

li a:hover {
    background-color: var(--cor2);
    color: white;
    border-radius: 4px;
}

.receitas-inicio {
    background-color: white;
    margin-top: 50px;
    max-width: 30%px;
}

.receitas-inicio li {
    display: inline-block;
    text-align: center;
    border: solid 0.5px;
    max-width: 200px;
    margin: 15px;
    padding: 10px 10px;
}

.receitas-inicio h2  {
    padding: 10px;
}

.receitas-inicio li:hover {
    background-color: var(--cor4);
    cursor: pointer;
}

footer {
    background-color: var(--cor3);
    color: white;
    bottom: 0;
    width: 100%;
    position: fixed;  
    text-align: center;   
}

footer a {
    text-decoration: none;
    color: white;
}

footer a:hover {
    color: var(--cor2);
}

Mergulhe em programação