Котик Антон

Разбирайте как можно больше отличных примеров:
codepen.io/search/pens?q=CSS+3D
codepen.io/search/pens?q=css3+animation
codepen.io/search/pens?q=css3+transform

Использовать другой плагин, которые нормально работает на мобильных устройствах.

Компилируйте sass в css там, где это можно сделать (локально). А на хостинг выгружайте уже готовые css файлы.

Для браузеров, которые поддерживают свойство transform.
https://pepelsbey.net/pres/pre-fixes/

Смысл использовать bootstrap'овскую сетку там, где достаточно простого решения вроде ungrid?
А если нужно что-то гораздо сложнее, чем уровень сеток в bootstrap?
Или что-то более гибкое, как jeet?
А кому-то подавай сетку на flexbox...

В общем, задачи у всех разные, вот и решают их по-разному. Стандартные решения подходят 99%, но не всем.

codepen.io/anon/pen/KzRmZK

За счёт чего получаются отступы в dev среде, смотрели?
Вариантов собственно не много: padding, margin, word-spacing, пробелы и прочие пробельные символы.

Если за счёт padding / margin / word-spacing, то разбираться, почему они меняются на проде.
Если за счёт пробелов между тегами ссылок, то разбираться, что режет пробелы на проде.

Среди подозреваемых в первую очередь проверьте всякого рода минимизаторы, если такие используются, - их часто отключают в dev среде и включают только на проде.

svg

Фон нужно задавать тогда для li, а ссылку сделать блочным элементом.

nav>ul>li {
    display: inline-block;
    background: #61c2e5;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
}

nav>ul>li>a {
    display: block;
    text-decoration: none;
    padding: 10px;
    font-size:130%;
    color:white;
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -o-transform: skewX(20deg);
}