Gap для кроссбраузерности или как правильно задавать отступы?

Question

[lUser L]

Добрый день!
Вот такой пример - https://codepen.io/5h4dy_s/pen/PomQpPM
В примере есть 2 списка: в первом для отступа между li задал списку(ul) через свойство gap, все работает шикарно, просто и замечательно, но есть одно но, оно не работает в некоторых браузерах, например в edge в мобильной версии, по этому приходится использовать второй вариант через margin , но если вы посмотрите на пример, то увидите разницу. Для того, что бы убрать эту разницу нужно извращаться, черезnth-child. first-child, убирать отступ у первого с лева, у последнего справа, в общем - дичь. Как вы это делаете, как вы решаете подобные задачи ? Возможно есть мини-библиотека на js, который делал бы gap кроссбраузерным. Подскажите пожалуйста!

upd

Только опубликовал вопрос, как у меня возник еще один: может gap не работает, потому что я через переменную задаю значения, и некоторые браузеры не работаю с переменными ?

Comments

[Ankhena]

И теперь контейнеру отрицательный margin на величину отступа.
И overflow ближайшему родителю, имеющему ширину окна.

[lUser L]

Ankhena, ого, напишите в ответ, отмечу решением. Спасибо!