To get a result like this structure I set a gray background on the body tag and set a maximum width of 900px for all sections (navigation, content area, and footer). The footer is pinned at the bottom using the flexbox.
The problem:
On the pages where content is too little, a gap is appearing. What could be the best way to extend the white container to fill that gap?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Could you share a read-only link to see if I can help you?
If you want a fullscreen website (no scrolling) you could just set the height of elements with vh
Example:
Navbar 5vh
Main Content 85vh
Footer 10vh
If not, just change the footer to position static and keep adding elements to the content or set a size of for example 100vh to the content section and you will see that there won’t be any gap with the footer 
Let me know if this solves your problem
Yeah, setting the min height to 100vh solved the issue 
Thank you Quitos
