javascripthtmljquerycsstwitter-bootstrap

Unregulated margins of html page


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">&nbsp;</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">&nbsp;</div>

    </div>

  </div>
</div>



<div class="jumbotron">
  <div class="container">&nbsp;
  </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">&bull;</li>
    <li class="dot">&bull;</li>
    <li class="dot">&bull;</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>


Solution

  • 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.