[Dúvida] menu hambúrguer

Oi, Camila, tudo bem?

Peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Fico no aguardo!

https://drive.google.com/drive/folders/1XI_kStLB1K0ijiharTeNwGny37ualTkk?usp=drive_link

Vê se consegue acessar

Oi, Camila,

Desculpa a demora em te responder!

Não consegui acessar, solicita permissão para que eu possa acessar o seu Drive. Ao compartilhar o seu link certifique-se de alterar o acesso para "Qualquer pessoa com o link".

Fico no aguardo!

Concedi acesso para você,da uma olhada

Oi, Camila,

Consegui ter acesso aos seus arquivos, muito obrigado por compartilhá-los!

O problema que você menciona acontece, pois as classes container__botao e .lista-menu__item foram escritas no arquivo "header.css" sem um dos underlines da classe no arquivo "index.html". Além disso, você adicionou o valor do padding na classe lista-menu__titulo, lista-menu__item como "1en" e o correto seria "1em". O código corrigido ficaria assim:

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

.lista-menu__titulo,
.lista-menu__item {
    padding: 1em;
    background-color: var(--branco);
}

Notei também que o espaçamento não está sendo corretamente aplicado, pois na classe container__imagem no arquivo "header.css", você adicionou o valor de padding como "1en", mas o correto para definir a unidade é "1em". A correção ficaria assim:

.container__imagem {
    padding: 1em;
}

Para que a aparência do seu menu hambúrguer se pareça ainda mais com a da instrutora, você pode usar a propriedade list-style: none; na classe lista-menu__titulo, lista-menu__item para remover os marcadores da lista. Também pode diminuir a propriedade toppara 75% na classe lista-menu. Além disso, para trazer o seu menu hambúrguer para a camada da frente da tela, podemos usar a propriedade z-index com valor "999" na classe lista-menu. Por fim, para alinhar o menu hambúrguer a lateral da página é possível usar a propriedade padding com valor "0" na classe lista-menu.

Ficaria assim:

.lista-menu__titulo,
.lista-menu__item {
    padding: 1em;
    background-color: var(--branco);
    list-style: none;
}

.lista-menu {
    display: none;
    position: absolute;
    top: 75%;
    width: 60vw;
    z-index: 999;
    padding: 0;
}

No arquivo "index.html" é necessário ajustar o fechamento e abertura de algumas tags <div> e <img>, na pate focada no primeiro card. Ficaria assim:

<div class="card">
    <div class="card__descrição">
        <div class="descrição">
            <h3 class="descrição__titulo">Talvez você também se interesse por...</h3>
            <h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
            <p class="descrição__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
        </div>
    </div>
    <img src="img/Perfil-escritora 2.svg" class="descrição__imagem">
</div>

No arquivo "carrossel.css", é necessário ajustar a escrita da unidade de medida "em". Ficaria assim:

.carrossel__titulo {
    color: var(--laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    padding: 1em 0 0.5em 0;
}

.swiper-pagination{
    position: initial;
    margin: .5em 0;
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!