Why does the text display over the footer?

You have set a fixed height to the div with the background image..
then all you’re elements have padding and margin fixed, so they go outside the container ..
Also without those fixed paddings/margins you can have the same problem, if your text wants more height than its container have.

There’s no footer problem.. ??

Yes but how do I fix the problem with the height so that the footer pushes itself to display under all the text? The background is just an image I inserted with some code that allowed me to place text over the image. The code I used was this one:

<div style="background-image:url(https://bit.ly/2JOum3);background-repeat:no-repeat;height:200px;width:200px;margin-top:20px;"><h1 style="color:black;line-height:18px;padding:20px 10px 2px 20px;">This is a Sample Headline</h1><p style="color:black;padding:2px 10px 10px 20px;">This is sample paragraph text on top of an image. You may need to change the color of the text so it's readable over the image.</p></div>

All I did was change the link in the image url to my image link and replace the text with my text.

Ok, so there’s a misunderstanding here. ??
The div height you set is fixed and is too small for the content you’re trying to display in it.
this: height: 560px;
Don’t you want to find another solution?
That page will never be responsive, unless you don’t write N media queries to achieve that (and this is valid also for the fixed width).
So in this situation, since you’re just interested to push the footer down without really solving the problem, add this css:

margin-bottom: 100px;

or something of the sort to the inline style of that div.

Hope this helps..

Well the only reason why the height was set to 560 is because that is the actual height of that background image that has the box with the circle icon in it. I wasn’t sure if changing that to a bigger number would cause the image to enlarge itself too much.

I also can’t seem to figure out where to put the line of code you added it seems when I add it all it does is add it as text not code. I am guessing I put it in the wrong place? I placed it right before the div tag at the end of my code.

Sorry I figured out where to put the code you gave me. But as you said the site is officially non responsive which I had not noticed until you mentioned it to me and I went on my phone to check. What would you suggest to fix and make the site mobile friendly?

Yeah, I could figure out the reason why you did that.
About the css, you have:
<div style="background-image: url('https://www.smartmoneymobile.com/wp-content/uploads/2015/02/textbox4.gif'); background-repeat: no-repeat; height: 560px; width: 846px; margin-top: 20px;">
place it after margin-top: 20px;.
But, using inline style is another thing not really suggested, you probably should assign a class or an id to this div, and style it with css (child-theme style.css or the custom css box in Advanced Options), otherwise when you’ll want to build media queries you’ll be forced to use the !important directive.

Anyway there are other ways to achieve what you want, background and border for the div, and maybe using the pseudo-element :before to place that smartphone img on the top.. But it’s your choice. ??