[Bug] Dúvida sobre exibição de imagem no projeto HTML/CSS

Olá Danielly, tudo bem com você?

• Para corrigir a cor de fundo do header: no arquivo styles.css, você está fazendo o import de header.css no final do arquivo, mas deveria ser no começo. Abaixo segue como o styles.css deve ficar:

@import url("header.css"); 

:root {
  --cor-de-fundo: #EBECEE;
  --branco:#FFFFFF;

}

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

• Por aqui os ícones não estavam aparecendo pois você está colocando o caminho das imagens dentro de uma pasta "img", por exemplo em: <a href="#"><img src="img/Compras.svg" alt="Carrinho de compras"></a> mas as imagens estão soltas. O que pode fazer é criar a pasta "img" e mover as imagens para dentro dela.

• Além disso, em header.css a imagem de menu não estava sendo encontrada pois você colocou ../ antes do caminho, dizendo para "voltar uma pasta", no entanto assim o arquivo menu.png não era encontrado. O que fiz foi colocá-lo dentro da pasta "img" e redefinir o caminho para background-image: url("img/Menu.png");. Também mudei os valores de altura e largura para adaptar melhor ao seu cabeçalho. Segue como deve ficar o header:

.cabeçalho_menu-hamburguer {
  width: 45px;
  height: 45px;
  background-image: url("img/Menu.png"); /* Caminho e extensão corrigidos */
  display: inline-block;
}

.cabeçalho {
  background-color: var(--branco);
}

Assim as imagens e a cor de fundo serão corrigidas.

Espero ter ajudado. Conte com o apoio do fórum :)

Um abraço e bons estudos!