Роман Дворянов

Абсолютное позиционирование это чаще всего когда ты видишь элемент на сайте, который как бы висит в воздухе, наслаивается, как стрелочки в слайдере.
Например: Меню на этом сайте, когда находится в самом верху страницы, позиционировано абсолютно, при скролле позиционирование меняется на фиксированное и менюха фиксируется в окне.

А вот общий контейнер, в котором меню, шапка, контент и вот это все, он позиционировано относительно.
Это означает, что все элементы, находящиеся внутри контейнера , которые позиционированы абсолютно, будут отсчитывать свои координаты в смещениях по горизонтали или вертикали, исходя из размеров и координат этого контейнера.

position используется везде, и в адаптиве и ... кто в 2020-м не делает адаптив?

Разница с Flexbox - флексбокс это о другом, тут общее только в том, что с помощью и той и другой технологии можно решить эту узкопрофильную задачу, более того часто они используются совместно, например отрисовать список элементов в попапе, список элементов можно разместить при помощи флексбоксов, а сам попап позиционировать по центру страницы

Тут нужна практика, когда столкнешься с этим, начнешь думать как это сделать, все поймешь.

Три варианта на выбор

Раз

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}

@media (max-width: 600px) {
  .container {
      grid-template-columns: 1fr 1fr;
  }
}

Два

.container {
    display: flex;
    flex-wrap: wrap;
}

Три

.container::after {
  content: '';
  clear: both;
  display: table;
}

.container__item {
  ...
  float: left;
}

В общем у вас там какие-то приколы с высотой этих карточек и судя по всему следующий элемент, после наведенного помещается в том же ряду под предыдущим, поэтому карточки смещаются, а не исчезают

Вот это подвинет ваши элементы и сделает съезжаемыми те что пониже. Как по мне, так там всю сетку нужно переделывать

.mmm:hover {
      box-shadow: 0 0 8px rgba(0,0,0,0.2);
      height: 425px !important;
  }

А вот такой вариант может и сработать

.mmm {
    height: auto !important;
}

.mmm:hover {
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    height: auto !important;
}

И не злоупотребляйте с импортантами и медиазапросами, пожалуйста, у вас там специфичность css зашкаливает

UPD: Исправлено

@keyframes fakeborder{
  from{
    border: none;
    transform: scale(1) translate(-50%, -50%);
  }to{
    border: 3px solid green;
    transform: scale(1.5) translate(-50%, -50%);
  }
}

.forFakeBorder {
  transform-origin: left top;
}

Если у вас убрать overflow-x с body и элемента с айди #page-container, то сможете добавить position: sticky и top: 0 (например) у элемента
.et_pb_module.et_pb_sidebar_0.et_pb_widget_area.clearfix.et_pb_widget_area_left.et_pb_bg_layout_light
и все заработает.
Но могут повыползать косяки верстки с просчетом размеров по горизонтали, вообще чинить подобные проблемы обрезая весь body по горизонтали такая себе идея. Если есть где-то момент, превышающий размеры 100% ширины сайта и его невозможно исправить, обрезайте скролл, используя overflow-x у родителя проблемного элемента, а не body, кроме того overflow на body не работает в iOs браузерах, с другой стороны в сафари на иос стики тоже не работает, но гугл знает где взять полифил)

У вас на фокус всех интерактивных элементов навешан этот стиль -

a:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="phno"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, textarea:focus, input[type="submit"]:focus, #comments:focus, select:focus, .toggle-nav button:focus, .search-box button:focus {
    outline: 1px dotted #000;
    border-bottom: 1px solid #000;
    text-decoration: none !important;
}

По порядку:
Вы говорите про класс class="container", а в пример приводите id="container", это не одно и то же, селектор body - общий селектор, всей страницы, если вам понадобится ограничить ширину вашего сайта, вы можете ограничить body, это так же как и ограничить ширину по селектору html, это очень плохая практика и не везде это работает, а container это уже содержимое вашей страницы, его легко можно ограничить по ширине внутри body, вы можете называть его по другому - main, wrap, site, в популярных css фреймворках, например container часто используется, как функциональная (с контентом) часть сайта, в общем это хороший тон.

анимацию можно на css, скролл вниз на jquery, допустим у нас есть круглая кнопка в виде стрелки вниз(html) -

<a href="#second-screen" class="scroll-down-btn"></a>

Нам нужно повесить анимацию на кнопку(css) -

.scroll-down-btn {
/* Тут стили кнопки, картинки, размеры */
  position: relative;
  bottom: -15px;
  animation: bounce 0.4s infinite; /* Анимацию bounce пропишем ниже */
}

Ну и собственно сама анимация(css) -

@keyframe bounce {
  0 {
    bottom: 0;
  }
  100% {
    bottom: -15px;
  }
}

Ну а теперь нужно, чтоб эта кнопка работала(jQuery) -

$('.scroll-down-btn').on('click', function(e) {
  e.preventDefault(); // Запрещаем переход по ссылке
  var target: $(this).attr('href'), // Берем значение из ссылки как цель id="second-screen"
        destination: $(target).offset().top; // Ищем верхнюю координату у нашей цели

  $('body,html').animate({scrollTop: destination}, 500); // Плавно проматываем до цели
});

vertical-align не так работает, не путайте с атрибутом valign в html разметке,
Про работу свойства vertical-align можно почитать здесь: htmlbook.ru/css/vertical-align

vertical-align может центрировать контент внутри блока только если display у элемента стоит table-cell
Вот небольшой примерчик вертикального центрирования codepen.io/irodger/pen/ZWaRoo