Кирилл

Скачайте нормальный шрифт отсюда:
https://fonts.google.com/specimen/Open+Sans
И попробуйте подключить шрифт оттуда же:

Виноват руководитель, который по каким-то причинам не проверил вёрстку и не объяснил программисту задачу.

Начните с этого, для начала frontender.info/techniques-for-creating-textured-text
И если вы не можете найти это в гугле, то у меня для вас плохие новости(

SVG инлайн-блочный элемент. Пропишите для свг line-height: 0, должно помочь

mydevice.io/devices - обратите внимание на столбцы css width и css height
Под смартфоны две основных ширины сейчас - 320 и 360 пикселей.

Демки не смотрел, но скажу пару слов почему я согласен с вашим оппонентом:
Многие браузерные екстеншены, JS плагины и бох знает что еще работают с html и body. В частности, навешивают, удаляют классы, айдишники и прописывают разные свойства.
Так что есть возможность, что что-то из перечисленного пересечется с вашими стилями и всё поломает.
На пример кривонаписанный экстеншен может удалять все классы с body, вместо того, что бы удалять только нужные ему классы.
По этому использовать обёртку более безопасно.

codepen.io/Kublyakov/pen/Egmrzm
блоку с классом title добавьте или удалите класс left

Ошибок и артефактов быть не должно, но проблема в другом: Зачем клеарфиксить все блоки? О_О
Это же лишняя работа для браузера и ненужные псевдоэлементы для пользователя.
Да и отлаживать такой код через инструменты разработчика в браузере будет не очень удобно.
Лучше расскажите какую проблему вы хотите решить таким ужасным костылем, а там может и сообщество нормальное решение подскажет.