[Dúvida] Olá! | HTML e CSS: responsividade com mobile-first

Oii, Igor, tudo bem?

Encontrei algumas coisinhas pra você ajustar no seu projeto. Mas o principal erro era que o css linkado no html não estava fazendo ligação com o arquivo header.css:

Estava escrito assim:

<link rel="stylesheet" href="style.css">

Mas o correto seria assim:

<link rel="stylesheet" href="styles.css">

**E é necessário seguir a organização das pastas igual a do curso. No seu projeto as imagens e o Css do header estão fora de pastas, isso deixa o caminho errado. **

A organização precisa ser assim:

Projeto
├──  img
│   ├──  Compras.svg
│   ├──  Favoritos.svg
│   ├──  Logo.svg
│   ├──  Menu.svg
│   └──  Usuario.svg
│
├──  styles
│   └──  header.css
│
├──  index.html
├──  reset.css
└──  styles.css

Explicação da estrutura:

Projeto → Pasta principal que organiza todos os arquivos.
- img → Pasta que guarda as imagens no formato SVG.
  - Compras.svg → Ícone relacionado a compras.
  - Favoritos.svg → Ícone de favoritos.
  - Logo.svg → Logotipo principal.
  - Menu.svg → Ícone de menu.
  - Usuario.svg → Ícone de usuário.
- styles → Pasta para armazenar estilos específicos.
  - header.css → Arquivo de estilos voltado apenas para o cabeçalho da página.
- index.html → Arquivo HTML principal que monta a estrutura da página.
- reset.css → Arquivo CSS que "reseta" os estilos padrão dos navegadores para uniformizar a base.
- styles.css → Arquivo de estilos principal para personalização geral da página.

print vscode

Código HTML ajustado:

<!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">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header class="cabeçalho">
        <span class="cabeçalho__menu-hamburger"></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 perfil"></a>
    </header>
</body>

</html>

Ajustando isso vai dar tudo certo:

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

Lembrando que você pode verificar o código no github também.

Espero ter ajudado.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!