is my text positioning is stretching my website height?

I am making a website for my university project and I am going through some issues regarding my text classes. For some reason my classes seem to have an odd height, resulting in a white strip appearing at the bottom of my web page.

enter code here: <div id="index-section">
    <div class="index-title-quote">
      <center><h2>"Honour may not win power, but it wins respect. And respect earns power"</h2>`</center>`
      <center><h5>- Ishida Mitsunari, legendary samurai</h5></center>
    </div>



 #index-section div.index-title-quote{
  top: 165%;
  left: 50%;
  margin-bottom: -100%;
  transform: translate(-50%,-50%);
  position: absolute;
  z-index: 1;

}

#index-section div.index-title-quote h2{

  font-family: 'Bebas Neue', cursive;
  color: #fff;
  font-size: 20px;
  padding: 20px;
  opacity: 0.8;
}

#index-section div.index-title-quote h5{

  font-family: 'Roboto', sans-serif;
  color: #fff;
  font-style: italic;
  font-size: 13px;
  opacity: 0.6;
}

here is my code, thank you for taking the time to read this.