Okay so after looking things over, I think I see what’s going on.
#principle looks like your wrapping container and instead of setting a specific height (in your case 2000 px) you should set it to at least: height: auto;
That will give your other elements freedom to push their container as tall as it needs to be to fit them.
Which brings up issue #2:
After changing the height, your #btsSio section being set to position: relative; is then keeping that footer from being positioned at the bottom. Technically you don’t need a relative position on this element (#btsSio) at all. It looks like you’re using it to center the element, but you can just use margin: 0 auto; to do that instead and nix the left positioning entirely.
In fact you can do that with all the elements you’re trying to center. Just make sure when you’re using that margin styling, that you set widths on the elements you want centered. It doesn’t even have to be a stringently defined pixel value, you can easily set the width to a percentage and then and overall max-width to however wide you want it (which helps with responsiveness if you’re not going the flexbox root like @SkyC suggested).
Something like this: https://codepen.io/drding/pen/wqJByp