Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Background não preenchendo com a cor corretamente

Não estou conseguindo fazer o background preencher corretamente com a cor selecionada, fica um espaçamento entre o botão e a borda do header imagem com o problema

@media screen and (min-width: 1024px) {
  .container__titulo,
  .container__titulo--negrito {
    font-family: var(--secundary-font);
    font-size: 30px;
  }
  .container__titulo {
    font-weight: 400;
    display: block;
  }

  .container__titulo--negrito {
    font-weight: 700;
  }

  .opções {
    display: flex;
  }

  .opções__item {
    font-family: var(--primary-font);
    padding: 0 1em;
    text-transform: uppercase;
  }

  .opçôes__link {
    text-decoration: none;
    color: var(--black);
  }

  .container__imagem-transparente {
    display: none;
  }

  .cabeçalho__menu-hamburguer {
    display: none;
  }

  .opções__botão:checked ~ .lista-menu {
    display: block;
    width: auto;
  }

  .opções__item {
    padding: 1em 1em;
  }

  .lista-menu__item:hover {
    background: var(--gradient-blue);
  }

  .lista-menu__item:hover > .lista-menu__link {
    -webkit-text-fill-color: var(--white);
    text-decoration: none;
  }

  .opções__botão {
    display: none;
  }
}
1 resposta
solução!

Olá Gustavo.

Tudo bem?

Olhando oseu código percebi que você chamou a classe .opções__item duas vezes dentro da mesma** @media**, ou seja, um vai sobrescrever o outro, você precisa ver qual é o correto e apagar o outro.

Você chamou primeiro essa, e parece que essa é a correta:

.opções__item {
    font-family: var(--primary-font);
    padding: 0 1em;
    text-transform: uppercase;
  }

Ai um pouco mais para baixo tem essa outra que provavelmente está sobrescrevendo o padding:

.opções__item {
    padding: 1em 1em;
  }

Verifica se é isso por favor. Se não for isso, talvez seja outro estilo referente a essa classe .opções__item que esteja fora, ou em outro @media.

Espero ter ajudado e bons estudos!