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

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

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

.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

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

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

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

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{}

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA