[Dúvida] Lista nao aparece | HTML e CSS: responsividade com mobile-first

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alura Books</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header class="cabecalho">
<div class="container">
<input type="checkbox" id="Menu" class=""container__botao>
<label for="Menu">
<span class="cabecalho__menu-hamburguer container__imagem"></span>
</label>
<ul class="lista-menu">
<li class="lista-menu__titulo">Categorias</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Programação</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Front-end</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Infraestrutura</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Business</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Design & UX</a>
</li>
</ul>
<img src="img/Logo.svg" alt="Logo da Alurabooks" class="container__imagem">
</div>
<div class="container">
<a href="#"><img src="img/Favoritos.svg" alt= "Menu Favoritos" class="container__imagem"></a>
<a href="#"><img src="img/Sacola.svg" alt="Menu Sacola de compras" class="container__imagem"></a>
<a href="#"><img src="img/Usuario.svg" alt="Menu Usuario" class="container__imagem "></a>
</div>  
</header>
</body>

</html>
.





.cabecalho__menu-hamburguer {
width: 24px;
height: 24px;
background-image: url("../img/Menu.svg");
background-repeat: no-repeat;
background-position: center;
display: inline-block;

}

.cabecalho {
background-color: var(--branco);
display: flex;
justify-content: space-between;
align-items: center;
}

.container {
display: flex;
align-items: center;
}

.container__imagem {
padding: 1em;
}

.lista-menu {
display: none;
}

.container__botao:checked ~ .lista-menu {
display: block;
}

Olá, Danilo! Tudo bem?

Parece que você está tendo problemas com a lista do menu hambúrguer, certo? Pelo que pude analisar no seu código, parece que há um pequeno erro de digitação na linha do seu input checkbox. Você esqueceu de fechar as aspas na classe. Veja:

<input type="checkbox" id="Menu" class=""container__botao>

O correto seria:

<input type="checkbox" id="Menu" class="container__botao">

Esse pequeno erro pode estar interferindo no funcionamento correto do seu menu hambúrguer, pois a classe "container__botao" é essencial para a funcionalidade de mostrar e esconder a lista quando o checkbox é marcado ou desmarcado, como definido no seu CSS:

.container__botao:checked ~ .lista-menu {
    display: block;
}

Portanto, corrigindo esse pequeno erro, o seu menu hambúrguer deve funcionar como esperado.

Espero ter ajudado, qualquer dúvida fico à disposição.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em programação