Pavel-ww

Ссылка на страницу помогла бы вам больше. А так приходится гадать.
Добавьте к тому что у вас есть height: 100%; , возможно какой-то min-height потребуется, object-fit: cover;
Хотя не уверен что это сработает. Неужели у CMS нет возможности добавлять свой CSS? Тут надо над родителем работать

Что бы прям точно по центру, то так.

.wrap {
	display: flex;
	justify-content: center;
	position: relative;
}
.item:last-child {
	position: absolute;
	right: 0;
}

Все другие варианты (в контексте flexbox) будут учитывать ширину второго блока и смещать первый от центра на ее размер.
Например такой вариант

.item:first-child {
	margin: 0 auto;
}

Если ширина второго блока статична и известна, можно использовать calc в каком-то виде

Взгляните на этот фреймворк для верстки писем https://mjml.io/. Денек покурите документацию и станете асом в верстке email )).
Есть плагин для VS Code и Sublime

Ну в целом ситуация понятна - стили попапа далеко внизу css файла. Браузер читает код слева на право сверху вниз. Поэтому попап появляется до того как браузер прочтет его стили. Переместите важные стили, отвечающие за отображение в самый верх css файла. Ну и transition работает в обе стороны.
Но, вообще откуда такое решение взялось opacity: 0 и visibility: hidden? Обычно для попапа устанавливается display: none; и по клику на триггер или иному событию к нему добавляется display: block; или класс с display: block;.

Надо очистить всё у ul а не только list-style, надо убрать display block у li > a, для li display inline, а не inline-block.

Или вместо всех этих inline для li просто воспользоваться современными технологиями

.mnu_top {
	display: flex;
	gap: 0 75px;
}

Или вот так, что будет надежнее для старых IOS

.mnu_top {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min-content;
	grid-gap: 0 75px;
}

И еще с body разобраться. Вы все это пытаетесь делать при ширине body 320px. Это же всё не помещается внутрь body.
В целом, не грамотная верстка. Надо использовать контейнер, а не задавать ширину body.

И совет - вендорные префиксы добавляйте в самом конце, когда верстка уже готова и отлажена. Для этого есть post css плагины для редакторов кода

С такой ( стандартной) разметкой никак. Загуглите range slider plugin, найдёте плагин. Установите и используйте для создания ползунков. Его можно стилизовать как угодно

Не понял что такое main-e, не нашел это в коде.

Отступ снизу - не настроена высота html, body 100% и дочерних элементов, поэтому высота соответствует контенту, а не растягивается по высоте экрана.

Отступ справа - у вас максимально возможная суммарная ширина всех колонок 1702px (жестко прописано в коде) поэтому остается пустое пространство на экранах шире этого размера. Запутались с комбинацией max-width и width в третьей колонке

Joomla3+JoomShopping

Сейчас с этим всё так же - отлично работают, все что вы хотите можно прикрутить. Поэтому, если есть опыт с этим, почему бы не использовать. Тем более Joomla значительно превосходит Wordpress по гибкости и безопасности.
Не для холивора написал)). Одинаково знаю и работаю с обоими CMS. Если клиенту все равно какая CMS то всегда предлагаю Joomla.

На гридах однозначно. Если контент динамический, единственное решение на данный момент только с применением js https://masonry.desandro.com/layout.html

Для этого необходимо использовать правильный html.
Конструкция должна быть не такая

<div>
   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>
</div>

А такая

<ul>
    <li>
        <a href="#"></a>
    </li>
    <li>
        <a href="#"></a>
    </li>
    <li>
        <a href="#"></a>
    </li>
</ul>

Всегда исследуйте примеры инспектором кода и найдете ответы.

Никак. Это же обновление страницы с применением нового кода. Не работает по другому