bassoon48, футеру понизить или убрать z-index, обертке main на том же уровне, что и футер - повысить до 1 (или больше чем у футера). Предварительно выяснить, зачем вам все эти 999. От гигантомании или это чем-то оправдано.
Чтобы разобраться что происходит и как работает z-index, гуглить про контекст наложения.
Если флекс колонками, то align-self: flex-end;
Или по любому, margin-left: auto
Если флекс оставить row, то суммарная ширина блоков должна быть больше 100%. Можно верхнему задать 100%.
Ну или вариант с text-align из комментария Сергея.
Либо гридами, а не флексами.
В голове не всё компилируется, а jsfiddle не работает в России без vpn ;)
Используйте, например, codepen.io