Espaçamento diferente do instrutor | HTML e CSS: responsividade com mobile-first

Usando exatamente o código do instrutor, os icones do cabeçalho ficaram com o espaçamento diferente

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

Então precisei mudar o CSS para:

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

.cabecalho {
  background-color: var(--branco);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.cabecalho__menu-hamburguer {
  margin-left: 20px;
  margin-right: 15px;
}

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

.container__imagem {
  padding-left: 10px;
  padding-right: 10px;
}

.container__imagem-usuario {
  margin-right: 20px;
}

.container__imagem-compras {
  padding: 0.3em;
}

Tive o seguinte resultado:

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

Acredito que esteja correto, porém o código de CSS mudou

Olá, Rafael! Tudo bem?

A meu ver, alguns nomes de classes que você trouxe nessa sua configuração CSS estão diferentes comparadas com a do projeto do curso. Então, imagino que possa ser por isso que o código da aula, no espaçamento, tenha fica com o tamanho errado. Segue o código do arquivo header.css do fim desse modulo de aula:

OBS: caso vá usar o código abaixo, lembre de ajustar o nome das classes usados no arquivo index.html.

.cabeçalho__menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

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

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

.container__imagem {
    padding: 1em;
}

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

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

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

.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__botao {
    display: none;
}

Contudo, você chegou no mesmo resultado usando, de certa forma, uma maneira diferente do que a mostrada em aula, isso é interessante e importante para o desenvolver do seu conhecimento no uso CSS. E seria até legal você manter o seu código, para deixar o projeto mais a sua cara, mas lembre-se sempre de não fazer gambiarra nas configurações.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.