Eu havia feito o código de uma forma que o menu hamburguer não estava funcionando e verifiquei depois que era por um erro meu: não havia colocado o span dentro da label. Qual o motivo de utilizar o span dentro dessa label? E pq isso faz com que o menu hamburguer funcione corretamente?
<body>
<header class="cabeçalho">
<div class="container">
<input type="checkbox" name="" id="menu" class="container__botao" />
<label for="menu"><span class="cabeçalho__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 Alura Books"
class="container__imagem"
/>
</div>
