Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

[Dúvida] Sobre o espaço na esquerda do menu hamburguer

Boa tarde, estou tendo problemas com esse espaço do lado do menu que foi criado não sei em que parte do código, gostaria de ajuda, claro eu poderia deixar assim mas não é o certo.

print do menu

.cabecalho__menu-hamburguer{
    width: 48px;
    height: 48px;
    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;
    padding: 1rem;
    position: relative;
}

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

.lista-menu {
    display: none;
    position: absolute;
    top: 80px;
    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);
}

.lista-menu__link{
    background: var(--azul-degrade);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}
1 resposta

Olá, Laura! Tudo bem?

Para resolver esse problema, você pode adicionar a propriedade margin: 0 no seu seletor .cabecalho__menu-hamburguer. Isso fará com que o espaço ao lado do menu seja removido.

Seu código ficaria assim:

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

Dessa forma, o espaço ao lado do menu hamburguer será removido.

Espero que isso resolva o seu problema!

Bons estudos!

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