Recover Page

Header Block

The hero-body modal-box block need's to go below the closing hero</section>tag

<div class="hero-body modal-box">
  <div class="container has-text-centered">
    <p class="title">
      Recover
    </p>
  </div>
</div>

Recover Block

Add the containerblock after the hero-body modal-box block

 <div class="container">
  <div class="modal-content">
    <div class="card listing-info">
      <span class="modal-header">Reset Password</span>
      <br>
      <div class="card-content no-top-padding">
        <div class="content">
          <div class="label-info">Enter the email address associated with your account, and we’ll email
           you a link to reset your password.
          </div>
          <form action="" class="modal-form">
            <p class="control has-icon has-icon-right">
              <input type="email" class="input is-invis" placeholder="Email address">
              <span class="icon is-small">
                  <i class="fa material-icons">mail</i>
              </span>
            </p>
          </form>
          <a class="button is-success book">Send Reset Link</a>
        </div>
      </div>
    </div>
  </div>
</div>