Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Meu logo aparece de forma errada

<!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">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
    <title>AluraBooks</title>
</head>
<body>
    <header class="cabecalho">
        <div class="container">
            <span class="cabecalho__menu-hamburguer"><span>
            <img src="./assets/Logo.svg" alt="Logo AluraBooks" class="container__imagem ">
        </div>
        <div class="container">
            <a href="#"><img src="assets/Favoritos.svg"alt="Meus Favoritos" class="container__imagem"></a>
            <a href="#"><img src="assets/Compras.svg"alt="Carrinhos de Compras" class="container__imagem"></a>
            <a href="#"><img src="assets/Usuario.svg"alt="Meu Perfil" class="container__imagem"></a> 
        </div>       
    </header>
</body>
</html>
.cabecalho__menu-hamburguer{
    width: 24px;
    height: 24px;
    background-image:url("../assets/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;
}

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

.container__imagem{
    padding: 1em;
}

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

3 respostas

Oii, Dev! Tudo bem?

Ao olhar o seu código está tudo está certinho na linha da img no HTML e no CSS. Mas, para que eu possa te ajudar de forma mais assertiva, poderia por gentileza compartilhar o link do seu projeto no Github ou no Drive (não esqueça de ativar a permissão de acesso) , contendo todos os arquivos , dessa forma eu consigo analisar ele como um todo, simular o seu problema para encontrar uma solução.

Fico no aguardo.

Abraço!

solução!

Conseguir a resolução, estava faltando a barra que fecha a tag span, ai o navegador lia como se tivesse duas tags diferentes