erro | HTML e CSS: responsividade com mobile-first | Alura

O que eu fiz de errado? Gente, segue o código aí. `!DOCTYPE html>

<header class="cabeçalho"></header>
<div class="container">
    <input type="checkbox"id="menu" class="container__botao">
    <label for="menu"></label>
<span class="cabeçalho__menu-hamburger container__imagem"></span>
</label>
<ul class="lista-menu">
    <li class="lista-menu__lista">categorias</li>
<li class="lista-menu__itens"><a href="#"class="lista-menu__link">progamaçao</a>
    <li class="lista-menu__itens"><a href="#"class="lista-menu__link">progamaçao</a>

front- end
infraestrutura

busines

    <li class="lista-menu__itens"><a href="#"class="lista-menu__link">Designer& ux</a>

<a href="#"><img src="img/Usuario.svg"class=" container__imagem" alt="meu perfil"></a>

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

:root{ --cor--de--fundo:#ebecee; --branco:#fff; } body{ background-color: var(--cor--de--fundo); }

cbeçalio__menu-hamburger{ width: 24px; height: 24px; background-image: url("../img/menu.svg"); display: inline-block; background-repeat: no-repeat; background-position: center;

} .cbeçalio__menu-hamburger{ background-color: var(--branco); display: flex; justify-content: space-between; align-items: center; .container{ display flex align-items: center; position: relative; }

.container_imagem{ padding: 1rem; }

.lista-menu{ display: none; position: absolute; top: 100%; }

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

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