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%;
}
