HamSter

transform: skewX(20deg) translate(-50%, -50%);

Несколько правил трансформации пишутся вместе в одном transform: ... skew() rotate() translate() .... ;

А у вас в разных и поэтому transform: skewX(20deg); перебивает transform: translate(-50%, -50%);

*если я правильно поняла вопрос )

Правильно так

1. Верстка списка начинается с тега ul внутри которого размещаются li, а уже внутри них ссылки могут быть!
Это по стандартам так!!!
2. У ссылок, чтобы они были именно ссылками и работали обязательно должен быть атрибут href="http://link..."
3. :active, :focus задается, соответственно, ссылкам a, а не li

4. Код предоставляйте в codepen, либо компилируйте ваш sass (кстати тоже написанный с грубыми ошибками)!!
5. .... аж глаза заболели от вашего вопроса!

1. Берешь бесплатные psd макеты в количестве от 5 до 10 (в зависимости как все идет) и верстаешь в соответствии с чек-листом (*достаточно соблюдения первых 5 пунктов ).
2. Устраиваешься в любую it фирму и начинаешь работать. Берешь опыт работы с командой.
3. А потом можно еще поработать на фрилансе. Мне он больше опыта дал.

как сделала бы я

:before, :after свой любой фон можно задавать

Почему - потому что нечего анимировать!
Решение - добавить блоку .list-establishments { width: 50%; }

примерно так

так?