Bootstrap layout footer colliding with other elements

Okay, so I'm building a layout in bootstrap + Rails.

If I upload a larger picture the footer does not clash with the text box with the content information but with the picture I am using there are issues.

what can I do to use the elements(pictures) I like and ensure that the footer never collides with the textbox?

the view looks like this

`<h1>Contact#index</h1>
<p>Find me in app/views/contact/index.html.erb</p>

<div class="container">
  <div class="content-overlap">
    <h2>Contact Us</h2>
      <p> For investment information call: <br>
        +phonenumberhere237 or +phonenumberhere8 <br> <br>
          For legal contact:+phonenumberhere0 <br>
           For partnership: phonenumberhere7142 <br>
                  </p>
  </div>
  <div class="image-overlap">
    <img src="assets\administration.jpg"  >
  </div>
</div>`

Using bootstrap and rails 5.1.4 (but it turns out the code comes from a codepen not bootstrap so ignore that forked code is here https://codepen.io/Anthematics/pen/RMwZJG)

The footer itself renders as a partial in my layouts folder - this issue persists in a few places but this has the least elements and once solved here I am sure I can solve elsewhere.

in HTML my footer looks like this <p class = "footie"> Victoria University 2018 </p>

in css

.footie {
  &:before {
    display: block;
    content: " ";
    clear: both;
  }
}

.footie {
  background: black;
  color: wheat;
}

Using clearfix where needed ? https://v4-alpha.getbootstrap.com/utilities/clearfix/

Or your could try :

footer {
  &:before {
    display: block;
    content: " ";
    clear: both;
  }
}

Taking your code :

<div class="container">
  <div class="content-overlap">...</div>
  <div class="image-overlap">...</div>
</div>
<div style='display: block; clear: both;'></div>