Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Cor do background não ocupa toda página!

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Melhorando o CSS e atividade Aplicando gradientes

por Gabriel Siqueira Alves
| 30.5k xp | 21 posts

Meu html.

<main>    
            <section class="principal">
                <h2 class="tituloprincipal"><strong>Sobre a Nunez Barbearia</strong></h2>
                    <img class="utensilios" src="imagsx.jpg" alt="utensilios de barbearia">
                    <p>Localizada no coração da zona norte de São José dos campos a Nunez Barbearia traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, já é destaque na cidade e conquista novos clientes a cada dia.</p>
                    <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
            </section>

            <section class="club">        
                 <h2 class="tituloprincipal" > Corte de cabelo e barba sempre que quiser no mês?</h2>
                    <p> É isso mesmo que você leu! sem pegadinhas. Você assina um plano com valor fixo por mês e corta seu cabelo e/ou faz a barba <strong>sempre que quiser</strong>. Além de receber brindes exclusivos, você ainda paga mais barato e fica sempre com seu visual alinhado! Muito bom né?</p>
                    <p><em>Entre em contato conosco e confira os valores.</p></em>
            </section>  

            <section class="mapa"> 
                <h3 class="tituloprincipal"> Localização do Nosso Estabelecimento</h3>

                <div class="mapa-conteudo">    
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3668.1256114228836!2d-45.91738108505887!3d-23.165615152981655!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cc379cbcec9e29%3A0xf337b5f01e7253b7!2sNunez%20Barbearia!5e0!3m2!1spt-BR!2sbr!4v1668705950451!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </section>
        </main>
2 respostas
por Gabriel Siqueira Alves
| 30.5k xp | 21 posts

Meu CSS.

.banner {
    width: 100%;
    position: relative;
}

.tituloprincipal {
    text-align: center;
    font-size: 2em;    
    margin: 0 0 1em;
    clear: left;
}

.principal {
    padding: 3em 0;
    background: #FEFEFE;
    margin: 0 auto;
    width: 940px;
}

.principal strong {
    font-weight: bold;
}

.utensilios {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.principal p {
    text-align: center;
    margin: 0 0 1em;
    font-size: 20px;
}

.club {
    text-align: center;
    background: #CCCCCC;
    width: 940px;
    margin: 0 auto;
    padding: 10px;
}

.club p {
    font-size: 20px;
}

.club strong {
    font-weight: bold;
}


.club em {
    font-style: italic;
}

.mapa {
    padding: 1em 0;
    background: #888888;
    width: 940px;
    margin: 0 auto;
}

.mapa-conteudo {
    width: 940px;
    margin: 0 auto;
}
solução!
por Henrique Nascimento Dantas
| 155.8k xp | 26 posts

Acontece que você já definiu na mesma classe o tamanho desejado ! Para resolver isso você pode alterar da seguinte forma !

HTML

        <section class="club2"> 
            <div  class="club">
             <h2 class="tituloprincipal" > Corte de cabelo e barba sempre que quiser no mês?</h2>
                <p> É isso mesmo que você leu! sem pegadinhas. Você assina um plano com valor fixo por mês e corta seu cabelo e/ou faz a barba <strong>sempre que quiser</strong>. Além de receber brindes exclusivos, você ainda paga mais barato e fica sempre com seu visual alinhado! Muito bom né?</p>
                <p><em>Entre em contato conosco e confira os valores.</p></em>
            </div>  
        </section>

CSS

.club2{
    background: #CCCCCC;
}
.club {
    text-align: center;

    width: 940px;
    margin: 0 auto;
    padding: 10px;
}

Nota-se que eu defino um tamanho numa TAG a baixo ! sendo assim a de cima continua no tamanho cheio da tela !

Agora é só fazer isso no restante do código e vai dar certo !