Trouble with footer in Bootstrap 4-Twitter bootstrap

I am working on a website in Bootstrap 4 and am using the footer at https://www.codeply.com/go/7TzhebXBdX/bootstrap-4-footer-with-contact-form

I have changed a little of it and, while it is great in the browser, it breaks down in responsive mode. The background color stops about half way down the footer and the rest is shown with a white background. The submit/reset buttons are mostly off the page.

I have been working on this for a few days and can’t seem to get it to work in responsive mode.

The footer can be seen here: http://leeunderwood.org/_tmp/index.html

The code for the footer is:

<footer class="footer">
    <div class="container">
         <div class="row">
            <div class="col-md-7">
                <h4 class="footer-logo-text"><i class="fa fa-book"></i>&nbsp;&nbsp;spreading biblical truth in a darkened world ...</h4>
                  <div class="row">
                    <div class="col-10">
                      <p>
                      The goal here is to separate myth, traditions, pagan practices, and man-made stories from the truth of the Hebrew Scriptures. Many people believe that because something has been written, taught, or practiced for centuries, or even decades, it must be scriptural. Yet nothing could be further from the truth. Time does not necessarily prove the validity of something. It's therefore important to research these writings, teachings, practices, and beliefs to determine their origin and whether they actually do have a scriptural basis. <a href="/about.html" class="text-light bg-dark">more ...</a></p>
<br>
<p style="font-size:90%;margin-bottom:0;">
This Website is not affiliated with any government, institution, organization, religious group, or political establishment. Copyright &copy; 2004 - <script>document.write(new Date().getFullYear());</script> | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib.</a> Customization has been done by site owner.</p>

        </div>
                </div>
                <ul class="nav">
                    <li class="nav-item"><a href="" class="nav-link pl-0"><i class="fa fa-facebook fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-github fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-instagram fa-lg"></i></a></li>
                </ul>
                <br>
            </div>
            <div class="col-md-5">

<p class="contactUs"><a id="contactMe">Contact Us</a></p>

<!--   beginning of form   -->

<form id="myForm" class="contact__form" method="post" action="mailContact.php">

    <!-- form message -->
    <div class="row">
        <div class="col-12">
            <div class="alert alert-success contact__msg" style="display: none" role="alert">
                Your message was sent successfully.
            </div>
        </div>
    </div>
    <!-- end message -->

    <!-- form element -->
    <div class="row">
        <div class="col-md-6 form-group">
            <input name="name" type="text" class="form-control" placeholder="Name" required>
        </div>
        <div class="col-md-6 form-group">
            <input name="email" type="email" class="form-control" placeholder="Email" required>
        </div>
<!--               <input id="test_email" name="email" size="25" type="text" value="" />   -->
        <div class="col-12 form-group">
            <textarea name="message" class="form-control" rows="6" placeholder="Message" required></textarea>
        </div>
        <div class="col-12">
            <input name="submit" type="submit" class="btn btn-success btn-sm" value="Send Message">  <input class="btn btn-success btn-sm" type="button" onclick="myFunction()" value="Reset form">
        </div>
    </div>
    <!-- end form element -->
</form>

<!--   end of form   -->

            </div>
        </div>

<!--   Footer design from: https://www.codeply.com/go/7TzhebXBdX/bootstrap-4-footer-with-contact-form redesigned by Lee Underwood   -->
<!--   Contact form code from: https://themehunt.com/blog/53-tutorial/162-how-to-create-an-ajax-contact-form-without-any-plugin   -->
</footer>

The CSS is:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 300px;
}

.footer {
  position: absolute;
  width: 100%;
  height: 300px;
}

/* Taller footer on small screens */
@media (max-width: 34em) {
    body {
      margin-bottom: 500px;
    }
    .footer {
      height: 500px;
    }
}

footer {
  padding-top:30px;
  padding-bottom:20px;
  background-color: #2F4454;
  color:#bbb;
  font: 400 13px/1.2em 'Open Sans',sans-serif;
}

footer a {
  color: #999;
  text-decoration:none;
}

footer a:hover, footer a:focus {
  color: #aaa;
  text-decoration:none;
  border-bottom:1px dotted #999;
}

footer .form-control {
  background-color: #1f2022;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
  border: none;
  resize: none;
  color: #d1d2d2;
  padding: 0.7em 1em;
}

.form-control {
  font-size: 0.8em;
}

I sure could use a bit of help here. Anything else needed just let me know.