а это вы имели ввиду что пустому диву нельзя давать .div{ background: url("url.png"); такое свойство, т.е. нужно создавать псевдоэлемент для див блока, и уже ему давать свойство в виде урла картинки? Так?
userInfo - от этой обертки можно избавиться, заменив флекс на грид.как в будущем можно будет реализовать кастомные рамки для пользователей с различным статусом?
Вариант с флексами более предпочтителен при разной структуре страниц. Например, если не все страницы четко состоят из header, main, footer. Тогда проще задать flex-grow для main, чем думать для которой строки на какой странице задать 1fr в гриде.
На вашей странице футер уже встанет на приличное место, если прекратить задавать ему свойства, смысл которых вы не понимаете. А именно про relative и координаты.
Высоту в верстке тоже стараются не задавать. Мы никогда не знаем сколько будет контента (в том числе он может различаться и в разных языковых версиях), шрифт, который окажется у пользователя и т.д.
Так что у футера её лучше убрать.
Зачем вы пишете три раза одинаковые свойства для трех соц.сетей. А если их будет 10? Так и будете долбить? Может всё таки им один общий класс задать?