Meus itens estão desalinhados | HTML e CSS: responsividade com mobile-first

index

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="reset.css">
</head>
<body>
    <header class="cabeçalho">
        <span class="cabeçalho__menu-hamburguer">
            <img src="img/Logo.svg" alt="logo da Alura Books">
            <a href="#"> <img src="img/Favoritos.svg" alt="Favoritos"> </a>
            <a href="#"> <img src="img/Sacola.svg" alt="Menu de compras"> </a>
            <a href="#"><img src="img/Usuario.svg" alt="Meu Perfil"> </a>
        </span>
    </header>
</body>
</html>`

header.css

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

}

styles.css

@import url(styles/header.css);
:root{
    --cor-de-fundo: #EBECEE;
    --cor-secundaria: #ffffff;
}
body {
    background-color: var(--cor-de-fundo);
}

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

Olá, Laura! Como vai?

Pelo que você compartilhou, vejo que o seu código e o código da instrutora têm algumas diferenças que podem estar causando o desalinhamento dos itens no seu projeto. No código da instrutora, a estrutura do header foi organizada de maneira mais modular, utilizando a <div class="container"> para agrupar os itens. Isso facilita o alinhamento, principalmente quando usamos Flexbox. Já no seu código, você está utilizando apenas um <span> para agrupar os itens, o que pode não estar aplicando o layout da maneira esperada.

Você pode tentar adicionar as div com a classe container como fez a instrutora, e corrigir a tag span para garantir que o agrupamento dos itens seja feito corretamente. Por exemplo:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <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">
          <div class="container">
               <span class="cabeçalho__menu-hamburguer container__imagem"><span>
               <img src="img/Logo.svg" alt="Logo da Alurabooks" class=container__imagem>
          </div>
          <div class="container">
                <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos" class=container__imagem></a>
                <a href="#"><img src="img/Compras.svg" alt="Carrinho de compras" class=container__imagem></a>
                <a href="#"><img src="img/Usuario.svg" alt="Meu perfil" class=container__imagem></a>
            </div>
      </header>
</body>

</html>

Tente ajustar seu código dessa forma, e veja se o alinhamento melhora.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

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

Mergulhe em programação