Будет работать на вьюпортах меньше или равных 1920
Вам хорошо бы определиться в какую сторону вы двигаетесь от мобилок к десктопам или наоборот (mobile first или desktop first). Хотя бы для конкретного проблемного селектора. В идеале, конечно, для всех в одну, но бывают и исключения.
Разбирайтесь с флоатами. Почитайте как они работают, про clearfix к ним, подумайте, нужны ли они там действительно. Если текст должен именно обтекать блок с картинками, это одно дело, если это два столбца, то совсем другое.
А заодно с абсолютами и их нужностью.
Если не понятно, что происходит, обводите элементы рамочками. Начните с футера.
1. Использовать table, если это табличные данные.
2. Вытащить из строк, выстроить гридами.
3. Использовать display table
4. Ждать сабгрид.
p.s.
1. В любом случае перестать повышать вложенность. селекторов без повода.
2. Вряд ли вам действительно было нужно свойство widows. Наверное, это все таки width
У меня другой вопрос: зачем обводку крестика вы прибили псевдоэлементом и абсолютом?
Почему просто не задать border и border-radius для спана, который вокруг svg? Зачем куча лишнего кода и абсолют??
Если ТЗ нет, то по умолчанию, на ширине макета сайт должен выглядеть как в макете или очень близко к нему.
На всех остальных ширинах от 320 до ∞ сайт должен выглядеть хорошо. Где-то пропорционально, где-то с перестроениями, где-то с ограничением макс ширины. Это зависит не только от верстальщика, но и от самого макета, а также наполнения сайта. Тут нет единого универсального решения.
без абсолюта у тебя положение текста будет зависеть от того, есть иконка или нет. А если она не загрузилась?
Если она не загрузилась, то осталось свободное место. Хоть абсолютом, хоть гридом. (И вообще пропал весь спрайт и сайту стало грустно)
Варианта со сдвигом три: вставлять иконку как img (промолчу), вставлять её как content в псевдоэлемент (а это совсем уж неудобно, потому что плохо регулируются размеры).