lamer350

Проблема с отступами, не смотрел ваш код но наверняка вы с помощью css добавили margin, а слайдер не берет его в расчет. Посмотриет документацию вашего слайдера, там отступы скорее всего можно задавать отдельно в js

У вас все по порядку, просто вы применили сетку тут:

.column1 {
display: grid;
}

а по умолчанию для grid элементы разлетаются по углам, подробнее почитайте тут: https://html5book.ru/css-grid/#terminology

PS. Так же вы злоупотребляете span, так делать нельзя. Тег предназначен для строчных елементов, им можно обернуть текст например, но не вставлять внутрь список...

так где

.main-menu ul li ul:hover {
  display: block;
}

надо чтобы было:

.main-menu ul li:hover ul {
  display: block;
}

#sfm-sidebar li.sfm-has-child-menu>ul.sfm-child-menu{
display: block !important;
}

Переделайте все это в animation через keyframe, приохотит это из за того что анимация у вас отрабатывает за 0.2s (200млс), а клик происходит за 10-50... В итоге :active перестает быть активным (как только вы отпускаете кнопку мыши) и анимация останавливается (и зависает на 1s так как вы указали это в transition).

Хоть не совсем и ясно что вы хотите, но скорее всего вы не знаете про FLEXы и потому задаете такие вопросы. Потому лучше изучите flex и grid и больше не придется верстать с костылями...

Потому что это все работает у вас не так как нужно.
lazyload должен был удалить на беке src для img, если посмотреть исходный код страницы у вас видно src="/content/catalog/catalog_E19GSANTOS_-BEIOFW)-1.jpg", грузится и сама картинка, и видно же что здесь .jpg
Правильная настройка плагина будет тогда когда у всех img не будет src в коде на фронте, src должен генерировать плагин lazyload и подставлять в DOM

Добавте просто SVG стиль vertical-align:bottom в css

.ball svg{
  vertical-align:bottom;
}

#class{
  margin-left:50px;
}

Вы обращаетесь к ID которого не существует, у вас же есть только images и PPAP
Скорее всего там необходимо #images вместо #class