Как сделать так, чтобы активный слайд не смещался при смене?

Norum, примерно так

.gallery-slider .owl-item.center {
  transform: scaleX(1.3);
  transform-origin: bottom left; /* Чтобы не перекрывал слайд слева*/
  margin-right: 165px !important; /* Чтобы не перекрывал слайд справа*/
}

Подбирайте на глаз значение margin-right в зависимости от значения scaleX.
+ скорректируйте положения заголовка и стрелок, или сместите слайдер еще больше влево, или найдите баланс.

По изображениям (наверняка следующий вопрос :) ) - готовьте их под размер центрального слайда и примените к img object-fit: cover;

Как сделать так, чтобы активный слайд не смещался при смене?

Norum,
Структура html должна быть такая

CSS код - замените аналоги. (оставил некоторые ваши строчки закомментированными что бы понимали в чем ошибки). естественно в точка остановки потребуется коррекция расположения заголовка или размера шрифта. Но в целом, теперь это единая конструкция и рендомно ничего не уплывает. Все можно контролировать.

/*Section gallery */
.gallery {
    max-height: 600px;
}

.gallery .gall-wrap {
    overflow: hidden;
}

.gallery-block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
}
.gallery-block .title-block {
    align-self: flex-end;
    margin-bottom: -100px;
}

.gallery-slider {
    /*! min-width: 100% !important; */
    /*! min-height: 600px !important; */
    /*! transform: translateY(-215px); */
    left: -70px;
}

.gallery-slider .gal-slide {
    transition: 1.3s !important;
    /*! width: 350px !important; */
    height: 350px !important;
}

.gallery-slider .owl-stage {
    display: flex;
    align-items: flex-end;
    /*! justify-content: center; */
    /*! margin-left: 100px; */
    height: 600px !important;
}

.gallery-slider .owl-stage-outer {
    overflow: visible !important;
}

.gallery-slider .owl-item {
    /*width: 350px !important;*/
    height: 350px;
    transition: 1.3s !important;
}

.gallery-slider .owl-item img {
    width: 100%;
    height: 350px;
    transition: 1.3s !important;
}

.gallery-slider .owl-item.center {
    height: 600px !important;
    /*! width: 445px !important; */
    transition: 1.3s !important;
}

.gallery-slider .owl-item.center img {
    height: 600px !important;
}

.gallery-slider .owl-item.center .gal-slide {
    height: 600px !important;
}
.gallery-slider .owl-nav {
    font-size: 40px;
    position: absolute;
    top: 150px;
    left: 60%;
}

Ширина - вещь неприкосновенная. Максимум что вы можете делать - играться с шириной своих айтемов, но не шире чем owl айтемы. Играйтесь с количеством слайдов (попробуйте 3 а не 5) и шириной .gallery-block. После этого потребуются корректирорвки положения заголовка и стрелок.
Что касается увеличения ширины центрального слайда, что бы не писать долго вот здесь ответ Owl-carousel как реализовать центральный блок большего размера?
Результат с подсветкой для наглядности

Joomla 3: как восстановить категории?

47911, тогда да, только пересоздание

Как зафиксировать ширину колонки grid элемента?

Вот вам шпаргалка https://fls.guru/grid.html

Как сделать так, чтобы активный слайд не смещался при смене?

Norum, сайт не доступен.
В общем, вместо того что бы вынести разумное зерно, вы приняли мой ответ как личный выпад. Уверяю это не так. Я вам дал хорошую отправную точку для понимания. Читать и понимать документацию - это разные вещи. Не понимая принципы работы вы пытаетесь найти ответы сообразно вашему видению. Поэтому не находите их. Ведь правильный ответ - это на 50% правильно заданный вопрос.

Первое что надо сделать - удалить/ закомментировать весь код который вы написали для слайдов. Именно он вызывает проблемы с которыми вы пытаетесь бороться.
Стилизацию стрелок можно оставить.

Итак по сути, какие вопросы стоят перед вами.
Количество слайдов (это в настройках OWL) + ширина слайдов (из контекста настроек) + центрирование (это в настройках OWL).
И тут надо понимать следующее. Ширина слайдов и их положение рассчитывается динамически исходя из ширины контейнера и количества слайдов заданное в настройках. Поэтому никакие статичные значения в css к этому применять нельзя, иначе получится смещение слайдов как в вашем случае.

Контейнер - это контентный контейнер вашего сайта или любая внешняя обёртка в которую помещена OWL карусель. Регулируя ширину контейнера вы влияете на ширину слайдов. Поэтому, для получения визуального контроля примените временно к .owl-item outline обводку. И уберите overflow visible для .owl-stage-outer чтобы видеть границы контейнера. overflow visible надо применять в самом конце работы, когда слайдер полностью настроен.

Следующий этап - стилизация ваших айтемов .gal-slide. Вот здесь вы уже можете задать ширину статично (хотя по большому счету лучше избегать любых статичных настроек ширины и настроить на глаз динамично используя ширину контейнера и paddings для .owl-item - об этом ниже), отцентровать каждый айтем внутри слайда через margin: 0 auto; или flex и настроить высоту внутри активного слайда. Для удобства также временно можете задать outline для .gal-slide, чтобы понимать визуально, где он находится внутри слайда owl.

Расстояние между слайдами (.owl-item) лучше убрать в настройках. По умолчанию в owl margin-right: 10px;. Настройте это на 0. И если потребуется регулировать расстояние между вашими айтемами (.gal-slide) делайте это через css задав paddings левый и правый для .owl-item. То есть слайды (.owl-item) будут находиться плотно друг к другу, но визуально паддинги внутри них будут создавать гэп между вашими айтемами (.gal-slide).

Но имейте ввиду, что если вы зададите статичную ширину .gal-slide, то paddings будут здесь лишними. И единственный инструмент который останется для контроля гэпа - ширина контейнера. к тому же вам придется менять статичную ширину в точках остановки.

Надеюсь это направит вас в нужном направлении.

Вот базовый пример с эмуляцией сетки OWL при настройках 3 айтема, по центру. И кастомными настройками для ваших айтемов.
Красный - граница контейнера.
Темно-серый - .owl-item
Светло-серый - .gal-slide

Изменяйте значения в

.gallery-slider .owl-item {
    padding: 0 10px;
}
.container {
    max-width: 900px;
}

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

Как сделать, чтоб DIV растягивался по высоте по содержимому?

Евгений Обыкновенный, без разницы что в базе. На разметку контейнера это как влияет? А у вас не правильная разметка именно контейнера (ов). Создаете нужный лайоут, а внутри расставляете php вызовы из базы. И пусть там будут div -ы br-ы и весь прочий мусор.

Если прям с инлайн стилями с (float и прочим) выводится из базы, то тут только джаваскриптом чистить и формировать лайоут. Нет никаких css свойств чтобы это исправить. В любом случае дополнительный html потребуется, хоть даже если clearfix использовать. Но коль уж доп html нужен, то лучше на флексе сделать.

Добавил код в ответ - играйтесь

Как выровнять элементы блока?

У вас итак всё выровнено по центру .parent. В чем вопрос?

Как сделать так, чтобы активный слайд не смещался при смене?

Вы задали кучу вопросов по этому слайдеру и не читаете ответы. Всё уже было в них. Не трогайте обертки (слайды) OWL в вашем css коде. Поведение, расположение, размеры слайдов в том числе в брейкпойнтах настраивается ИСКЛЮЧИТЕЛЬНО средствами javascript из документации OWL. Слайды OWL это контейнеры в которых находится ваше содержимое. Вот только его и настраивайте через css. Если не хватает объектов для css кода, увеличьте вложенность. А слайды OWL НЕПРИКОСНОВЕННЫ. Единственное, что вы можете настраивать в них через ваш css - это внутренние отступы (paddings).
Вот это всё не допустимо.

Вы ломаете сетку слайдера которая тянется из js библиотеки, вычисляется динамически и поэтому никогда не сможете это настроить статичными размерами в css. Только конфликты создаете.

И в принципе даже свойства в коде который обращенн к img не правильны по своей сути. Все должно быть настроено исходя из контекста настроек слайдера. Изображение должны быть (оставаться) 100% ширины.

По большому счету, вам надо осознать принцип работы OWL, удалить всё что вы сделали и начать с начала правильно. Потому что сейчас получается исправление ошибок ошибочными решениями, что всё больше затягивает за горизонт событий невыполнимости ))

Как сделать, чтоб DIV растягивался по высоте по содержимому?

Опять разметка не правильная. Не внимательны. Поместите текст в P или в DIV.

А как вам надо? Сколько айтемов должно быть (айтем - блок содержащий оба ваших объекта)? Как они должны размещаться? Я вам базовый код дал, всё остальное дело техники. Скриншот полного лайоута предоставьте. Забудьте вообще про float. В 2021 это свойство стоит использовать только по его прямому назначению - обтекание объекта текстом, а не создание лайоутов. И не инлайнте стили - это моветон. CSS в отдельном файле должен быть.

Как правильно задать стили бордеру?

towncitybr, не по макету?))) Фигма вам еще тот код сделает. Код Антона делает тоже самое, просто запись другая - как люди пишут а не как Фигма

Как сверстать блок не по сетке?

Вообще-то box__wrap прижат влево к контейнеру, а вправо уходит переполнение. Из контейнера не надо ничего вытаскивать.

Совет - сначала подключите скрипт слайдера owl, slick или что вы там хотите использовать, и настройте его. Думаю, после этого от проблемы не останется следа. Такие проблемы решаются только в контексте скрипта слайдера.
И это вам вообще не нужно (по крайней мере пока не подключили слайдер, он сам сделает все как надо)

.box__wrap {
  display: flex;
}

Как сверстать такой блок?

Ваш вопрос слишком общий. Сверстать такой блок очень просто, если использовать флексы или гриды. Здесь никто не будет учить вас этим технологиям, если вы их не знаете. На ютубе полно уроков. И это не сложно. За пару дней можно научиться

Как разместить модуль Войти в теме Divi в одну колонку, чтобы все элементы шли друг под другом?

Похоже не тому родителю пытались задать свойства. Без ссылки на сайт помочь не чем. Должны это понимать

Возможно адаптировать данную таблицу или только скролл?

0906ddd, тогда всё просто - вставьте заголовки таблицы в ячейки с текстом и скройте их для десктопов. В мобильной версии отобразите заголовки вставленные в ячейки, скройте ячейки с заголовками для десктопов, и для всей оставшейся таблицы уже дело техники - display: flex, flex-direction: column и далее прочая стилизация, паддинги и т.д.

Как с помощью флексов создать цвет фона на половину экрана?

Согласен с Lynn «Кофеман». Градиент - наиболее адекватный способ. Причем здесь флексы и причем здесь контейнер ? Это надо применять к обертке контейнера - секции или всему body - смотря какая у вас задача по дизайну. Кроме градиента можно использовать псевдо элементы before after в абсолютной позиции (width: 50% height: 100%). Но градиент значительно проще и меньше кода