Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

linha branca entre banner e principal

meu projeto esta apresentando uma linha branca entre o banner e a parte de texto que vem logo abaixo, minha solução para o distanciamento lateral do conteudo foi criar uma div abaixo do main com a tag container e colocar todo o conteudo dentro, aplicando o linear-gradient ao main, sendo q nesta parte esta funcionando bem mas esta uma linha branca entre os conteudo e n é margin, padding ou border, oq pode ser? ( imagem do projeto atual )

[...]
<body>
        <header>
            <div class="caixa">
                <h1><img src="../img/logo.png" alt="Logo da Barbearia Alura"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <img class="banner" src="../img/banner.jpg">
        <main>
            <div class="container">
                <section class="principal">
                    <h2 class="titulo">Sobre a Barbearia Alura</h2>
                    <img class="utensilios" src="../img/utensilios.jpg" 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>[...]
main {
    background: linear-gradient(gray, 5%, white, 95%, gray);
}
.container {
    width: 940px;
    margin: 0 auto;
}
.banner {
    width: 100%;
}
2 respostas
solução!

Oi, Eliezer! Esse é um probleminha bem estranho mesmo rsrs!

No seu arquivo CSS, aplique essas propriedades no seu body e veja se o problema é resolvido:

body {
    display: flex;
    flex-direction: column;
}

vlw rodrigo, n sei muito bem oq aconteceu, mas isso resolveu.