How to stick the footer to the bottom of the page? [closed]

I need the site footer to sit across the bottom of the site at all times.

Currently, it sits across the site bottom when there is content on the page, but with no content on the page it (.site-footer) rises from the bottom to the middle of the visible page as represented in this image:

I was able to answer my own question and posted discovery process below:

A quick search shows this question has been asked and answered many times.

From StackOverflow: Make footer stick to bottom of page correctly

From StackOverflow: How to get the footer to stick to the bottom of your web page.

From CSS-Tricks: 5 different ways to make a sticky footer

From Code Pen: “Always on the bottom” Footer

From WordPress: How to make footer fixed to the bottom of the screen?

I used the WordPress answer for my answer:

.site-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;   
}