Hey great coding!
I see you're facing an issue that was driving me mad in the past and it's "Why can't I get my footer at the bottom?"
When we use flex it centers content vertically on a web page, even the footer! We can handle this with a simple solution
margin-top: auto;
Why margin-top: auto; ?
With the right changes the footer will remain at the bottom regardless if there is more or less content.
Happy coding!