Минус первого варианта в том, что ссылки при этом практически склеились. А за это гугл будет ругаться.
Задайте фон и посмотрите.
Кроме того, варианты дают разное отображение. А значит:
Дальше нужно смотреть в реальный дизайн, что в нем реально происходит и откуда взялась такая необходимость. Если это меню, то почему дизайнер нарисовал это так, что нужно творить такую дичь с паддингами и отрицательными марджинами.
если я представлю, то кардинально изменится вся картина
Да, именно по этому имеет смысл этим заниматься. Причем до выбора инструмента для решения, а не наоборот.
Вся разница в одном css свойстве. Хоть с реактом, хоть без него.
А ещё обязательно нужно представлять, что будет при переполнении, если элементы перестанут помещаться в строку.
upd: и да, как вы поняли, что он просто стоит справа?
Попробуйте представить, что дизайнеру пришло в голову задать фон или рамку правому элементу. Будет это логично выглядеть, если блок будет растянут на всё свободное пространство? А если он будет прибит к правому краю?
DaniilPo, опять же скрин нечеткий, поэтому сложно понять что именно происходит с шрифтом. Но по тому что можно разглядеть, кажется, что жирность там присутствует.
Возможно, дело в нецелых размерах шрифта.
Можно пробовать -webkit-font-smoothing: antialiased (или наоборот отключить, если стоит и проверить) https://habr.com/ru/post/122269/
DaniilPo, в этих стилях нет свойств font-family и font-weight.
Больше того, в них есть opacity: 0;, так что удивительно, что они вообще где-то отображаются.
DaniilPo, вы показали только подключение шрифтов. А стилей не показали.
А еще лучше песочницу.
И скрин с айфона в нормальном качестве сделайте, пожалуйста.
Можно как-нибудь попробовать на базе этого https://jsfiddle.net/Ankhena/5jecmvw0/
С моноширным шрифтом легко. С немоноширным как-то вычислять точку перехода градиента.
При любой ширине окна сайт должен выглядеть хорошо и не иметь горизонтальной полосы прокрутки.