Footer en bas de l'écran et non en bas de la page

• Bonjour,

Je créer actuellement un site web pour un projet scolaire, mais je n'arrive pas à fixer mon footer en bas de page, il se met en bas de l'écran quand on est tout en haut. Dès qu'on scroll, le footer reste ou il est et on remarque qu'il est en fait au milieu de la page.

A savoir que j'ai déjà essayé pleins de solutions, mais rien ne marche, même pas:

position: absolute;

bottom: 0;

Je pense donc qu'il y a un problème dans le reste du code mais où? Bonne question.

Je vous met le code intégrale sur codepen:

https://codepen.io/Blouwii/pen/MWGNyLp?editors=1100

(PS: Ne faite surtout pas attention à la mise en page désastreuse, elle est très bien sur les moteurs de recherche, ici on se concentre uniquement sur le footer, et j'ai mis tout le code pour éventuellement savoir si qlqn sait d'où vient l'erreur)

Merci pour vos réponses !

Windows / Opera 91.0.4516.65