When your content doesn't fill the page, the footer won't stay at the bottom of the page by default.
First, add a class to your body. I prefer to use the site name for easier file searching. In this case, let's name it sample.
Next, wrap your content like so:
In your CSS, add styles to display the body as a flex column using vertical-height:
then make sure that the content takes up the full column: