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!