Bootstrap Carousel Переполнение верхнего и нижнего колонтитула

Question

Я пытаюсь исправить загрузочную карусель, которая переполняет div над ним и нижний колонтитул под ним.

Вот как это выглядит в моем приложении правильно

Я пытался воспроизвести проблему здесь , но я не могувоспроизведите полную проблему, как на картинке.Но вы можете видеть, что карусель переполняет div над собой, потому что вы не можете нажать на синюю кнопку.

h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
    opacity: 1 !important;
}

.carousel-caption{
    bottom:auto;
    top:20%;
    padding:2%;
    background:transparent;
    /*color:#B3D567;*/
    color:black;

}
.item{
  height:300px !important;
}
.carousel {
    height: 100%;
}
.carousel .item,
.carousel .item.active,
.carousel .carousel-inner {
    height: 100%;
}

.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;

}
.bs-example{
    margin: 20px;
}

.carousel.carousel-fade .item {
  opacity:0;
  filter: alpha(opacity=0); /* ie fix */
}

.carousel.carousel-fade .active.item {
    opacity:1;
    filter: alpha(opacity=100); /* ie fix */
}

Что происходит?Спасибо.