ReActor Дмитрий Вершанский

var newModal = document.getElementById('newModal');
  if (newModal.style.display == block) {
    body.style.overscrollBehavior = 'contain';
  }

Для селектора тега body задействуйте

overflow-x: hidden;

один из вариантов - это использование bootstrap-сетки и инициализации класса .justify-content-between

В рамках медиа-запросов на мобильном интервале разрешений, задайте для горизонтального скроллбара opacity: 0; Если необходимы будут псевдоэлементы для доступа к scrollbar - напишу ниже

Суть решения в том, чтобы тег <video> вложить в произвольный блочный контейнер <div>, а затем методом абсолютного позиционирования этого <div> расположить его в желаемом месте изображения

Прячьте их абсолютным позиционированием

img {
    position: absolute;
    left: -150px;
}

Соответственно применяя каждую конкретную позицию опираясь на media-запрос

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

Что именно вы хотите, поясните, тот облачный IDE некорректно выводит результирующее окно

Пожалуйста https://jsfiddle.net/HunteR_VRX/d56r3we8/230/

либо просто поставьте color: #444; +/-

Уточните о каком именно свойстве вы ведете речь? Потому как существует перечень наследуемых свойств от родительского элемента ко всем его дочерним, а есть не наследуемые. Из этого следует, что велика вероятность отсутсвия необходимости в каких-либо дополнительных манипуляций с вашей стороны)

Сделайте для начала reset дефолтных отступов

* {
   padding: 0;
   margin: 0;
}

А также проверьте наличие мета тега viewport в head

<meta name="viewport" content="width=device-width, min-scalable=1, initial-scale=1.0">

Рекоммендую новую технологию GRID, поддержка браузеров уже на высокос уровне, вот кстати довольно хороший урок по основам Grid CSS https://youtu.be/agmgl-ElC8A