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

Pequeno espaço em branco entre o banner e a sessão principal

Olá pessoal, eu alterei alguma configuração e apareceu um pequeno espaço em branco entre o banner e a sessão principal, alguém sabe como removê-lo?

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

/*CSS comum a todas as páginas - Cabeçalho e Rodapé */

body {
    font-family: 'Montserrat', sans-serif;

}

header {
    background:  #655D8A;
    padding:  20px 0;
}


.caixa {
    position: relative;
    width:  940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 10px;
    right:10px;
}


nav li {
    display: inline;
    margin: 0 0 0 150px;
}

nav a {
    text-transform: uppercase;
    color:  #FDCEB9;
    font-weight:  bold;
    font-size: 22px;
    text-decoration  : none;

}

nav a:hover {
    color: #D885A3;
    text-decoration:  underline;
}

footer {
    text-align: center;
    background: #D885A3;
    padding: 40px 0;

}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

main {
}


/* css da home */

.banner {
    width: 100%;
}

.titulo-principal {
    text-transform: uppercase;
    text-align:center;
    font-weight: bold;
    font-size:  2em;
    margin: 0 0 1em;
    clear: left;
}

.principal {
    padding: 40px 0;
    background: linear-gradient(#655D8A, #7897AB); 
    font-size: 2em;
    text-align: center;
    margin:  0 auto;

}

.principal p {

    margin: 10 10 1em;
    color:  #000000;
}

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.mapa {
    padding: 3em 0;
    background: linear-gradient(#7897AB, #FDCEB9); 

}

.mapa-conteudo {
    width: 940px;
    margin:  0 auto;
}

.mapa p {
    margin: 0 auto;
    text-align: center;
}

.beneficios {
    padding: 3em 0;
    background: linear-gradient(#FDCEB9, #D885A3);
}

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

.lista-beneficios {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

.itens{
    line-height: 1.5;
    font-size: 2em;
    margin: 0 auto;

}

.itens:nth-child(2n) {
    font-weight: bold;
}

.itens:before {
    content: "★";
}


/* CSS da página contato */

.formulario {
    background: linear-gradient(#655D8A, #D885A3);
}

form {
    margin: 40px 0;
}

form label, form legend {
    display:block;
    font-size: 20px;
    margin:  0 0 10px;
}

.input-padrao{
    display:block;
    margin: 0 0 20px;
    padding:  10px 25px;
    width: 50%;
}

.checkbox {
    margin:  20px 0;
}

.enviar {
    width: 40%;
    padding: 15px, 0;
    background:  orange;
    color:  white;
    font-weight: bold;
    font-size: 20px;
    border:  none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;

}

.enviar:hover {
    background:  darkorange;
    transform: scale(1.2);
}

thead {
    background:  #555555;
    color:  white;
    font-weight:  bold;
}

td, th {
    border: 1px solid #000000;
    padding: 8px 15px;
}

/* CSS da página métodos */

.video {
    background: linear-gradient(#655D8A, #D885A3);
    padding: 3em 0;
}

.video-conteudo {
    width: 560px;
    margin: 1em auto;
}
4 respostas
solução!

Oi Amanda, tudo bem?

Provavelmente é uma margin que está fazendo isso. Poderia colocar todo seu código aqui para que possamos copiar e testar? Assim fica mais fácil para vermos o que pode tá acontecendo.

Obrigada e bons estudos!

Abraço.

Oii Lorena, tudo bem por aqui sim e com você?

Segue o HTML da home:

<!DOCTYPE html>
<html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <title>Teacher Amanda | Aulas de inglês descontraídas com foco em conversação</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style_home.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    </head>

    <body>
        <header>
            <div class="caixa">
                <img src="logo.jpg">
                <nav>
                    <ul>
                        <li class="menus"><a href="index.html">Home</a></li>
                        <li class="menus"><a href="metodo.html">Método</a></li>
                        <li class="menus"><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>

        </header>

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

        <main>
            <section class="principal">
                <h1 class="titulo-principal">Falar inglês nunca foi tão fácil!</h1>

                <p>Você está cansado de todo ano colocar como meta aprender inglês mas nunca realmente tirar isso do papel?</p><br>

                <p>Já não aguenta mais entrar e sair de cursinhos e salvar milhares de vídeo aulas no Youtube só para nunca assistir?</p><br>

                <p>Eu vim aqui para que juntos possamos por um fim nisso e que você possa não apenas aprender inglês mas se apaixonar pela língua e desenvolver a disciplina necessária para domína-la e falar como um nativo.</p><br>

                <p>A minha missão é<strong> <em> te ensinar a encontrar a melhor forma de aprender, com uma metodologia completamente personalizada e muita prática.</em></strong></p><br>

                <p>Prepare-se para embarcar em uma jornada muito divertida e de muito aprendizado.</p><br>

                <p>Vamos já tirar todos esses sonhos do papel e realizar o impossível.</p><br>
            </section>

            <section class="mapa">
                <h3 class="titulo-principal"> Aulas no centro de Novo Hamburgo</h3>
                <div class="mapa-conteudo"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3466.1676655854753!2d-51.136250484893225!3d-29.6859182820142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95194251364dc5e9%3A0xd7dd3c17203b1805!2sBourbon%20Shopping%20Novo%20Hamburgo!5e0!3m2!1spt-BR!2sbr!4v1657224542530!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></div></iframe>
            </section>


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

                <div class="conteudo-beneficios">
                    <ul class="lista-beneficios">
                         <li class="itens"> Foco em conversação;</li>
                         <li class="itens"> Aulas 100% personalizadas;</li>
                         <li class="itens"> Atividades híbridas; </li>
                         <li class="itens"> Eventos de interação; </li>
                         <li class="itens"> Aplicativo exclusivo; </li>
                         <li class="itens"> Simulações de entrevistas. </li>

                </div>

            </section>

        </main>

        <footer>
            <img class="logo-rodape" src="logo_rodape.png">
            <p class="copyright">&copy; Copyright Teacher Amanda Kehl - 2022</p>
        </footer>
    </body>
</html>

Oi Amanda!

Analisando seu código, achei essa solução. Você está aplicando o background: linear-gradient(#655D8A, #7897AB); no .principal e não no body, então ele não está pegando em tudo. Como o background da barbearia alura é branco, nem percebemos isso, mas o seu é colorido então deu essa diferença.

Você pode aplicar o background no body e isso vai resolver, assim:


body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(#655D8A, #7897AB);
}

Veja aqui que sumiu no meu teste, tá um pouco diferente porque não tenho suas imagens etc:

print exemplo

Espero ter ajudado e bons estudos!

Abraço.

Consegui entender o por quê do problema e deu certo a solução sugerida!

Muitissimo obrigada pela ajuda <3