Алексей Скляров

Возможно вы не знаете о существовании такого тега.
Если он не подойдет, то гугл всегда вам подскажет.

Если прям лень накрыла окончательно, то:

input type number hide arrows

Какой-то из блоков у вас имеет ширину большую ширины экрана. Ищите, задавайте нормальную ширину. Не забывайте про border-box

Создание нового css-файла для каждой страницы, подразумевает что в данном файле вы будете описывать классы и стили, которые будут использоваться только на данной странице. То есть вы заведомо не повторяете свой код, выделяете схожие элементы на странице, создаете конкретный класс, описывающий данные элементы на странице. В таком случае никаких пробле при использовании "фиговины, которая объединяет все CSS файлы в один", не будет.

Кроме того, эта "фиговина", а на самом деле простой сборщик, просто собирает все ваши css-файлы в один последовательно, то есть реальной вашей проблемой при повторяющемся коде может быть только переопределение уже написанных вами классов.

У вас HelveticaRegular это шрифт Helvetica с 400 жирностью, то есть если вы подключите этот шрифт и поставите font-weight:700,то у шрифта все равно жирность не поменяется.

Вам нужно делать так:

@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaRegular.ttf);
  font-weight:400;
}
@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaLight.ttf);
  font-weight:300;
}
@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaBold.ttf);
  font-weight:700
}

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

В вашем же случае чтобы уйти от списка, нужно:

ul {
   list-style:none;
   margin:0px;
   padding:0px;
}

То есть вам достаточно просто практиковаться, практиковаться и еще раз практиковаться.

https://jqueryui.com/sortable/

А вообще гуглите: jquery list drag and drop

Создаете блок, в котором будет модальное окно. Задаете ему:

.modal-wrapper {
position:fixed;
display:flex;
align-items:center;
justify-content:center;
top:0px;
left:0px;
width:100vw;
height:100vh;
}

<div class="modal-wrapper">
 <div class="modal">
 </div>
</div>

Саму модалку делаете какой хотите.