Bootstrap layout footer colliding with other elements - html

Question

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;
}

Answer 1

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>