skuvaWeb

Вообще функция конструктор ничем не отличается от обычной. Вся разница в вызове и ключевом слове new.
Когда вы вызываете функцию с ключевым словом new, создается новый почти пустой объект, в котором вызывается ваша функция, и this указывает на новосозданный объект, в который записываются свойства. У стрелочной функции this != этому новому объекту

SVG

Для движения блока рекомендуется использовать свойство transform, ибо оно задействует CPU и работает быстрее.
В вашем случае

.fade-held{
  transform: translateX(330px)
  transition: .3s;
}

Вот что я имел в виду, только в стиле ООП

Рассказываю относительно новый хак
Родителю
position: relative;
дочернему элементу

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

И все встанет четко по центру, но можно выровнять и только по горизонтали или по вертикали

Почитайте о наследовании, каскаде и группировке стилей в css
В вашем случае .test1.test2 означает что стили применятся только к блоку у которых есть оба этих класса
<div class="test1 test2"></div>

Предположу что ты хочешь чтобы у тебя на странице не было скрола
Добавь в css

*{
  box-sizing: border-box;
}

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

Если родителю задан display: flex; то дочерние элементы по умолчанию буду одной высоту (меньшие растягиваются по самому высокому)