Your issue here is an incorrect usage of bottom and relative positioning, which moves an element relative to where it would try and go on its own. When an element has absolute positioning, bottom will set the bottom edge of the element to "a unit above/below the bottom edge of its nearest positioned ancestor." (from the docs).

There are two methods I would choose for this, based on what you mean by at the bottom of the screen:

• if you mean pinned to the bottom of the viewport, you can just use position: fixed and bottom: 0.
• if you mean pinned to the bottom of the entire page, change main to position: relative and set footer to position: absolute and bottom: 200px (from 2x the size of the footer, as that is measured from the bottom of the element.
• if you really want to make your site work well, just use flexbox.