Something is messing with the spacing of this HTML page and it is adding extra space after the body
. I added this border: 2px solid #000
to body
just to see if this extra space is included inside the body but as the image shows it isn't. I'll post the whole HTML/CSS page since it is kinda small and because I don't know where is the specific part of the code which is doing this mess.
/*
Cores básicas:
Conavoz azul claro: 0, 167, 241 == #00a7f1
conavoz azul escuro: 58, 0 , 143 == #3a008f
estetica da voz vermelho: 255, 0, 46 == #ff002e
sombra da letra cinza: 64, 53, 56 == #403538
background geral: 255,255,255 == #ffffff
*/
.nav a {
color: #00a7f1;
font-size: 16px;
font-weight: bold;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 15px;
padding-right: 10px;
text-transform: uppercase;
}
.nav li,
ul {
display: inline;
}
.nav {
margin: 20px;
}
.nav .nav-bts {}
.jumbotron {
height: 500px;
background-color: #fff;
background-image: url('res/LogoEsteticaDaVoz.png');
background-repeat: no-repeat;
background-position: center top;
margin: auto;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-weight: bold;
font-family: 'Shift', sans-serif;
}
.jumbotron p {
color: #fff;
font-size: 20px;
}
.learn-more {
background-color: #fff;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00a7f1;
}
.learn-more-win {
height: 300px;
}
.slider {}
.slide {
display: none;
padding-left: 200px;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
border-top: 1px solid #00a7f1;
height: 60px;
}
.arrow-prev {
display: inline-block;
}
.arrow-next {
display: inline-block;
}
.slider-dots {
margin-right: 30px;
margin-left: -5px;
text-align: center;
display: inline-block;
}
.slider-dots li {
display: inline;
margin-right: 3px;
}
.slider-dots li.active-dot {
#color: #888;
}
body {
border: 2px solid #000;
}
html {
border: 2px solid #000;
}
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<div class="nav nav-tabs">
<div class="container">
<div class="row">
<div class="col-xs-2"> </div>
<div class="col-xs-8">
<div class="nav-bts">
<ul class="list-group">
<li class="list-group-item"><a href="#">Membros</a></li>
<li class="list-group-item"><a href="#">Registrar-se</a></li>
<li class="list-group-item"><a href="#">Nossos serviços</a></li>
<li class="list-group-item"><a href="#">Contate-nos</a></li>
</ul>
</div>
</div>
<div class="col-xs-2"> </div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
</div>
</div>
<div class="learn-more slider">
<div class="learn-more-win slide active-slide">
<div class="container">
<h3>Estética da Voz</h3>
<p class="lead">Você sabia que com a voz e o discurso bem trabalhado, mais portas se abrirão para você?.</p>
<p><a href="#">Clique aqui para ver mais sobre estética da voz</a></p>
</div>
</div>
<div class="learn-more-win slide">
<div class="container">
<h3>Aulas</h3>
<p class="lead">Veja suas vídeo-aulas em qualquer lugar desde o computador até o celular!</p>
<p><a href="#">Clique aqui para ver mais sobre nossas aulas</a></p>
</div>
</div>
<div class="learn-more-win slide">
<div class="container">
<h3>Melhores profissionais da área</h3>
<p class="lead">Nos da ConaVoz temos apoio dos principais técnicos em voz do Brasil!</p>
<p><a href="#">Saiba mais sobre nossos métodos</a></p>
</div>
</div>
</div>
<div class="slider-nav">
<div class="arrow-prev"> <img src="res/arrow-prev.png"> </div>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<div class="arrow-next"> <img src="res/arrow-next.png"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
The problem is that inside the .learn-more-win.slide
elements you have a div
element with the .container
class which has a fixed width of 970px
.
But the .slide
has a left-padding
of 200px
thus making the total a 1170px
and overflowing their containers.
Either remove the 200px
padding from the .slide
or use the .container-fluid
inside it.