[Dúvida] Menu não aparece | HTML e CSS: responsividade com mobile-first

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

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


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

}

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

h1{
    background-color: #ffffff;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/reset.css">
    <title>Alura books</title>
</head>
    <body>
        <header class="cabecalho">
            <span class="cabecalho__menu-hamburguer"></span>
            <img src="assets/i.svg" alt="logo da alura books">
            <a class="cabecalho__fvoritos" href="#"><img src="assets/Favoritos.svg" alt="Favoritos"></a>
            <a class="cabecalho__compras" href="#"><img src="assets/Sacola.svg" alt="compras"></a>
            <a class="cabecalho__usuario" href="#"><img src="assets/Usuario.svg" alt="Usuario"></a>
        </header>


    </body>
</html>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade