Ломается верстка в хроме при при уменьшении масштаба.
Пометка: macbook pro 13 macOS high sierra, chrome 65v, mozilla 59v
Ситуация следующая: верстаю я значит, потом делаю меньше масштаб, чтобы глянуть как ломается верстка, и замечаю в хроме какой-то странное поведение шрифт в хроме при уменьшении масштаба чуть-чуть становится меньше, то есть он не уменьшается содержимое одно и тоже, а блоки таких же размеров если эти размеры зафиксированы, содержимое контента начинает выезжать за блоки в итоге получается ху*** какая-то (см скриншоты 1,2). Причем, если мы будем смотреть все тоже самое в браузере mozilla (см скриншот 3), все будет просто уменьшаться и ничего соответственно ломаться не будет. Пошел я значит дальше, захожу на сайт htmlacademy.ru, уменьшаю масштаб окна и что я вижу, у них конечно тоже ломается но не так сильно, то есть у них какой-то другой подход к верстке, при котором ломается по минимуму (см скриншоты 4,5).
Да! многие читая это могут сейчас воскликнуть типа "да нахер тебе этот масштаб сдался, верстай и не смотри туда", но у меня удивляет то, что многие такие сайты как codecademy.com htmlacademy.ru telegram.org facebook.com vk.com (см скриншот 6) мы можем наблюдать, что там совсем все иначе, да ломается но не так, у них текст налазит друг друг на друга и при этом меньше ломается верстка. И тут я задумался может быть я не так верстаю, может что-то делаю не так ?
Что посоветуете ? Какие единицы для размера шрифта и line-height использовать ? Почему только в хроме такое, там движок очень сильно отличается или что ? Может подход к верстке изменить и какой тогда лучший ? Никакими фреймворками или библиотека при верстке не пользую, типа bootstrap и тому подобное. ХЗ может сетки не умею строить, не знаю как объяснить понимаю что чего-то не хватает(в плане знаний) но не знаю что.
ссылка на песочницу где я разместил свой футер 1 скрин 2 скрин 3 скрин 4 скрин 5 скрин 6 скрин 
Простой
Простой
Средний
