Pavel-ww

Я пробовал реализовать это посредством стандартных средств html - table, thead. tbody, tr, th, td. И все вроде бы не плохо, пока я не начал пытаться прикрутить к этому функционал спойлера.

Надо таблицу засовывать в спойлер, а не спойлер в таблицу. То есть сначала верстаете спойлер, потом в кнопки спойлера помещаете строки таблицы (по сути отдельные таблицы в каждой кнопке)

Если вы сделали верстку по "феншую" то у вас должно быть 5 секций и внутри каждой контейнер. Обращайтесь к контейнерам нужных секций отдельно через модификатор класса. Если один общий контейнер и вы не хотите это переделывать, тогда придется костылить. И для этого "верстку в студию" как говориться. Но лучше переделать, чем костылить - будет быстрее, правильнее и меньше css кода на выходе

VS Code - отличный, бесплатный, куча бесплатных плагинов на маркетплейсе на все случаи жизни в том числе и bootstrap сниппеты. Подключается по FTP через плагин. То есть не встроенный в CMS редактор

Примерно так

.ticket__flex .ticket__item {
	overflow-x: visible; /*или просто удалить этот стиль ( у вас значение scroll зачем-то)*/
}
.ticket__flex .ticket__item .inner__ticket {
	margin: 0 -10px;
	padding: 0 10px 25px;
}

Вроде по БЭМ делаете. Зачем составные селекторы?

Такие элементарные вещи узнаются из консоли разработчика. Выделите блок в консоли, исследуете состояние :hover, пощелкайте его туда обратно что бы понять что происходит в html и css коде.

Всё вместе - аккордеон
1 элемент - таблица внутри триггера аккордеона
2 элемент - таблица внутри тела аккордеона

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

А значит используйте CMS системы для создания своего сайта, такие как Joomla, Wordpress и пр. Они позволяют делать то что вам требуется, может быть с некоторыми дополнительными расширениями. начните изучать CMS и это вам пригодится так же и на пути к тому, чтобы стать разработчиком

Может лучше на пальцах объясните что вам требуется? Нарисуйте картинку например. Потому что ответ на ваш вопрос - НИКАК не правильно ))

Не правильная разметка и не те css свойства - причина проблемы. Пытаетесь прикрутить костыль к костылю.

<div class="wrapper">
        <div class="numbers">12345</div>
        <p class="text">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, nam numquam soluta voluptas quasi laboriosam
            temporibus officia culpa nulla iure.
        </p>
    </div>

.wrapper {
    border: 1px solid red;
    max-width: 200px;
    display: flex;
}
.numbers {
    background-color: yellow;
}

Например так

/*Появление меню при наведении на вкладку */
.vklmenu:hover .drmenu {
    display: block;
    animation: myFadeIn 400ms ease-in;
}
@keyframes myFadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

Без ссылки можно только гадать. Но подозреваю что проблема в .container, в "и выравнивает все по середине". Подозреваю флексом выравнивает? Если да, удалите это и просто добавьте к .lots margin: 0 auto;. И то только в том случае если ширина .lots меньше чем ширина контейнера. Никогда не используйте в .container какое либо выравнивание только ширину. Выравнивание должно осуществляться внутри обертки .lots, если это требуется

Это удалите

.gallery-slider .owl-item.center img {
	height: 700px;
}
.gallery-slider .gal-slide img {
  height: 100%;
  display: block;
}

Это добавьте

.gallery-slider .owl-item.active.center .gal-slide {
	height: 700px;
}

Ну и да, вы верно поняли - возвращайтесь к работе с изображениями. После этого возможно еще пара корректировок кода потребуется

Если нет доступа к HTML то с помощью css только скролл.

Изменяйте высоту в каждой точке остановки через медиазапрос. Какие с этим трудности?
А когда контейнер переходит на ширину 100% (<575px) попробуйте единицы vw для высоты (но только зачем?)

@media (max-width: 1320px) {
    .back_products {
        height: 330px;
    }
}
@media (max-width: 1199px) {
    .back_products {
        height: 300px;
    }
}
@media (max-width: 991px) {
    .back_products {
        height: 250px;
    }
}
@media (max-width: 767px) {
    .back_products {
        height: 200px;
    }
}
@media (max-width: 575px) {
    .back_products {
        height: 30vw;
    }
}