Minha lista não aparece | HTML e CSS: responsividade com mobile-first

fiz igual a instrutora mas por algum motivo quando clico na imagem de menu a minha lista não aparece

meu codigo:

HTML:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="inicio-config.css">
    <title>AluraBooks</title>
</head>

<body>
    <header class="cabeçalho">
        <div class="container">
            <ul>
                <li>
                    <input type="checkbox" id="menu" class="caixa-botão">
                    <label for="menu">
                        <span class="menu-hamburguer"></span>
                    </label>
                </li>
            </ul>
            <ul class="lista-menu">
                <li>
                    <a href="https://tm.ibxk.com.br/2021/04/05/05180502007300.jpg?ims=704x264">Charmander</a>
                </li>
                <li>
                    <a href="https://tm.ibxk.com.br/2021/04/05/05180502007300.jpg?ims=704x264">Charmander</a>
                </li>
                <li>
                    <a href="https://tm.ibxk.com.br/2021/04/05/05180502007300.jpg?ims=704x264">Charmander</a>
                </li>
                <li>
                    <a href="https://tm.ibxk.com.br/2021/04/05/05180502007300.jpg?ims=704x264">Charmander</a>
                </li>
                <li>
                    <a href="https://tm.ibxk.com.br/2021/04/05/05180502007300.jpg?ims=704x264">Charmander</a>
                </li>
            </ul>

            <img src="Logo.svg" class="img-header">
        </div>
        <div class="container">
            <img src="Favoritos.svg" class="img-header">
            <img src="Compras.svg" class="img-header">
            <img src="Usuario.png" class="img-header">
        </div>    

    </header>

    </body>

CSS:

inicio-config.css:

@import url("header.css");

body {
    background: #EBECEE;
}

header.css:

.menu-hamburguer {
    width: 50px;
    height: 50px;
    background-image: url("Menu.svg");
    display:inline-block;

}
.cabeçalho {
    background-color: white;
    display:flex;
    justify-content: space-between;
}
.container {
    display: flex;
    align-items: center;
    margin: 0 15px;
    padding: 15px 0;


}
.img-header {
    margin-left: 15px;
}

.lista-menu {
    display: none;
}
.caixa-botão:checked~.lista-menu {
    display:block;
}

Olá, Carlos! Tudo bem?

A lista não está aparecendo pois você colocou o código do botão do menu-hamburguer dentro de uma lista:

        <ul>
                <li>
                    <input type="checkbox" id="menu" class="caixa-botão">
                    <label for="menu">
                        <span class="menu-hamburguer"></span>
                    </label>
                </li>
            </ul>

Então ao selecionar a classe .caixa-botão e colocar o combinador ~ (que seleciona elementos que estão após (mas não necessariamente em seguida) o elemento especificado antes do símbolo) com a classe .lista-menu, ele está buscando a lista-menu dentro desse trecho do <li> do trecho de código que passei acima.

Para ele encontrar a .lista-menu de verdade, eles precisam dividir o mesmo elemento pai, então será necessário remover os elementos de lista desse trecho. Ficaria assim:

<input type="checkbox" id="menu" class="caixa-botão">
                    <label for="menu">
                        <span class="menu-hamburguer"></span>
</label>

Assim, ele conseguirá encontrar a .lista-menu, que existe após ele :D