Problemas no projeto | HTML e CSS: responsividade com mobile-first

<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header class="cabecalho">
        <span class="cabecalho__menu-hamburguer"></span>
        <img src="img/Logo.svg" alt="Logo da Alurabooks">
        <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos"></a>
        <a href="#"><img src="img/Compras.svg" alt="Carrinho de compras"></a>
        <a href="#"><img src="img/Usuario.svg" alt="Meu pertil"></a>
    </header>
</body>

</html>




@import url("styles/header.css") ;

;:root {
    --cor-de-fundo: #ebecee;
}

body {
    background-color: var(--cor-de-fundo);
}




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





Não abre o hamburguer e a linha de meu está torta, não está alinhada, não sei se baixei ou fiz algo errado.

Olá, Everson! Tudo bom com você?

Pelo que vi, você ainda está no começo do curso, quando ainda não foi abordado como é feito esses ajustes. Conforme for seguindo, você vai conseguir confirmar como é feito isso, mas vou te mandar também como ficou o código do cabeçalho que fiz seguindo o curso para que você também dê uma olhada, a título de curiosidade. Segue o código:

 <header class="header">

        <div class="container">

            <input type="checkbox" id="menu" class="container__button">
            <label for="menu" class="container__label">
                
                <span class="header__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">
            <h1 class="container__titulo"><b class="container__titulo_negrito">Alura</b>Books</h1>

        </div>

        <ul class="options">

            <input type="checkbox" id="options__menu" class="options__button">
            <label for="options__menu" class="options__label">
            <li class="options__item">Categorias</li>
            </label>
            <ul class="lista__menu">

                <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>    
            <li class="options__item"><a class="options__item_link" href="#">Favoritos</a></li>
            <li class="options__item"><a class="options__item_link" href="#">Minha estante</a></li>

        </ul>

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

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

.container__imagem{
    padding: 1em;
}

.header__menu_hamburguer{
    display: inline-block;
    background: url(../img/Menu.svg) no-repeat center;
    width: 24px;
    height: 24px;
}

.container__button:checked ~ .container__label > .header__menu_hamburguer{
    background: url(../img/Menu_Marcado.svg) no-repeat center;
}

.container__button:checked ~ .container__label{
    background: var(--azul_degrade);
}

.lista__menu{
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;
}

.container__button:checked~.lista__menu{
    display: block;
}

.container__button{
    display: none;
}

.lista__menu_titulo, .lista__menu_item{
    background: var(--branco);
    padding: 1em;
}

.lista__menu_titulo{
    color: var(--laranja);
    font-weight: 700;
}

.lista__menu_link{
    background: var(--azul_degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
}

.container__titulo, .container__texto, .options{
    display: none;
}

Espero ter ajudado, bons estudos, e um grande abraço!

Chegou a hora de transformar