AngReload

.editor-item ul {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
  white-space: nowrap; /* переносить слова? */
}

.editor-item ul li{
  overflow: hidden;
  list-style: none;
  display: inline-block;
  padding: 10px;
}

https://codepen.io/AngReload/pen/JwRemO?editors=1100
Разумеется, при ширине меньше 350px текст не вмещается и обрезается.

Это не отступ, просто элементы страницы принимают высоту по высоте своего содержимого. Можно указать в процентах, тогда если указана высота у родителя, то будет считать от родителя.

body,
#wrap,
main,
.section-preview {
    height: 100% !important;
}

Вообще, это переделывать надо. Навтыкали в body style, в стилях important'ы, #wrap мешается, отрицательные отступы, элементы наезжают друг на друга...

Просто подключите плагин jquery.easing

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

hamburger == '0' || hamburger == '0px'

Потому что последний это div.

Вообще, по правилам в ul могут быть только li. Валидатор на div ругается.
https://validator.w3.org/

К картинкам псевдоэлементы не прикрутишь. Только вариант 3. Хм, хотя можно и второй.

Перетащи мышкой картинку на окно браузера. И скопируй текст из строки адреса.

Он вариабельный — https://v-fonts.com/fonts/bahnschrift
Попробуй в CSS
font-variation-settings: "wdth" 75;