Entrar Ainda não tem acesso?
1
resposta

Gap

Referente ao curso HTML e CSS: responsividade com mobile-first

por Bruna Machado
| 95.6k xp | 28 posts
Estágio em GIS

No tópico anterior (https://cursos.alura.com.br/forum/topico-duvida-problema-no-espacamento-286759) levantei uma dúvida referente ao problema no espaçamento dos itens do header. Nesse tópico acabei resolvendo a questão utilizando a propriedade gap no cabeçalho:

.cabecalho {
    background-color: var(--cor--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 3em;
}

A questão dos ícones funcionou porém ao fazer o background azul ele acaba não completando a largura toda da página:

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeO que fazer?

1 resposta
por Renan Lima
| 3736.6k xp | 7912 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Bruna, tudo bem?

Que bom que você conseguiu resolver a questão do espaçamento utilizando a propriedade gap. Sobre o problema do background azul não completar a largura toda da página, você pode tentar adicionar a propriedade width com o valor de 100% no seletor .cabecalho, assim:

.cabecalho {
    background-color: var(--cor--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 3em;
    width: 100%;
}

Dessa forma, o cabeçalho deve ocupar toda a largura da página. Espero que essa solução funcione para você!

Qualquer dúvida, é só perguntar. Espero ter ajudado e bons estudos!