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

Background dos beneficios não preenche toda a tela

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

por Wallace Vinicius Lopes dos Santos
| 24.1k xp | 20 posts
Técnico Mecânico

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

}

.principal{ padding:3em 0; width:940px; margin: 0 auto;

} .principal p{ margin: 0 0 1em 0;

}

.principal strong{ font-weight: bold; }

.principal em{ font-style: italic; }

.imagembeneficios{ width: 60%; } .utensilios{ width:120px; float: left; margin: 0px 20px 20px 0; } body{ font-family: 'Merienda', cursive; } .mapa{ padding: 3em 0; width:940px; margin: 0 auto; }

.mapa p{ margin-bottom:2em; text-align: center; }

.beneficios{ padding: 3em 0; background-color:#888888; margin: 10px auto 10px auto;

} .conteudo-beneficios{ width:640px; margin: 0 auto;

} .lista-beneficios{ width:40%; display: inline-block; vertical-align: top; } .itens{ line-height: 1.5; } .itens:first-child{ font-weight:bold; } .imagem-beneficios{ width:60%; } .video{ width:560px; margin:2em auto; }

10 respostas
por Talita
| 51.2k xp | 33 posts

Bom dia, Wallace, tenta colocar aqui pra gente um pouco do HTML também para vermos como está organizado seu código e poder fazer uns testes aqui para ajudar a resolver seu problema

por Wallace Vinicius Lopes dos Santos
| 24.1k xp | 20 posts
Técnico Mecânico

Bom dia Talita, este é meu código HTML.

<body>
    <header>
        <div class="caixa">
            <h1><img src="logo.png" alt="logo da barbearia alura"></h1>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="página-2-barbearia.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <img class="banner" src="banner.jpg">

    <main>

    <section class="principal">



        <h3 class="titulo-principal">Sobre a Barbearia Alura</h3>

        <img src="utensilios.jpg" class ="utensilios" alt="utensilios de um barbeiro">

        <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

        <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></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="mapa">
        <h3 class="titulo-principal">Nosso Estabelecimento</h3>

        <p>Nosso Estabelecimento está localizado no coração da cidade</p>

        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d457.1383195248176!2d-46.651990385319515!3d-23.5646162!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce59541c6c79c3%3A0x36b90a85f0f8cb33!2sGrupo%20Alura!5e0!3m2!1spt-BR!2sbr!4v1650572711835!5m2!1spt-BR!2sbr" width="940" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

    </section>

    <section class="beneficios">
        <h3 class="titulo-principal">Benefícios</h3>

        <div class="conteudo-beneficios">
            <ul class="lista-beneficios">
                <li class="itens">Atendimento aos Clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais Qualificados</li>
                <li class="itens">Pontualidade</li>
                <li class="itens">Limpeza</li>
            </ul><img src="beneficios.jpg" class="imagem-beneficios">
        </div>

        <div class="video">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/K9jxirMY0BQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>            </div>
    </section>

</main>

<footer>
    <img src="logo-branco.png" alt="Logo da barbearia Alura">

        <p>©Copyright Wallace Vinicius - 2022</p>
</footer>
</body>
por Talita
| 51.2k xp | 33 posts

Wallace, nos meus testes aqui ela aparece com uma margin nas laterais, se for isso que você se refere do fato dela não pegar a tela toda, você pode resolver fazendo seguinte: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

isso é um código de reset, onde você tira todas as margins que o navegador coloca por padrão, o asterisco é um seletor universal do CSS, você pode entender um pouco melhor aqui: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Universal_selectors.

por Wallace Vinicius Lopes dos Santos
| 24.1k xp | 20 posts
Técnico Mecânico

Então talita, tentei aplicar o reset que vc me passou, mas não deu certo. A "caixa" apenas ficou posicionada no canto esquerdo, mas mesmo assim não ocupou toda a largura da página. Segue print: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

obs: Tentei modificar a largura da caixa através da propriedade width, mas não deu certo.

O problema que estou tendo é só para que o background-color da caixa de beneficios, preencha toda a largura da página, como mostra a imagem:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!
por Isa Oliveira
| 35.4k xp | 26 posts

Oie, tudo bem?

Então, eu testei seu código no meu computador, e ele está funcionando perfeitamente.

Vc está visualizando o preview pelo vs code? Se sim, recomendo que abra o arquivo no seu navegador, pra ficar mais fácil e 100% real, daí toda vez que vc fizer uma alteração, é só salvar a alteração apertando crtl+s e recarregar a página no seu navegador

mas fora isso, só tiraria as margens, porque background de site não tem margem, ficaria até estranho se tivesse

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Wallace Vinicius Lopes dos Santos
| 24.1k xp | 20 posts
Técnico Mecânico

Oie Isa, obrigado por testar meu código. Eu faço o preview pelo navegador mesmo, mas não sei o que estava acontece de errado então.

por Isaac Santos de Figueiredo
| 139.5k xp | 7 posts

Oi Wallace! Tudo bem? Espero que sim!

Você está utilizando reset.css? se sim verifica se ele está posicionado antes do seu css no html.

 <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">

Caso não esteja, tenta utilizar um e me dá um retorno!

Fico no aguardo! Abraço!

por Wallace Vinicius Lopes dos Santos
| 24.1k xp | 20 posts
Técnico Mecânico

Bom dia Issac, tudo bem e com vc?

Estou usando um reset CSS sim, e ele está posicionado antes do CSS no HTML, segue imagem: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Isaac Santos de Figueiredo
| 139.5k xp | 7 posts

Wallace você poderia copiar o css completo aqui?

por Luan Lopes Lino dos santos
| 56.1k xp | 5 posts

Wallace, tudo bem? verifica se no seu css, você retirou os atributos de .main{}