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 некорректно выводит результирующее окно

Одним из вариантов является:
1) Исходное (целое) изображение
2) Предварительно нарезанное по вкусу (на маленькие рваные пазлы) с помошью слайсер-инструмента в фоторедакторе
3) Далее вы работаете с селектором тега изображения и скрываете его при наведении курсора

img:hover {
   display: none;
}

4) Фрагменты нарезанного изображения должны быть абсолютно позиционированы таким образом, что вы собираете этот пазл виртуально в целое изображение, причем все эти фрагменты должны иметь свой контейнер-родитель, которому прописываете относительное позиционирование (position: relative) и относительно него вы двигаете эти пазлы собирая в целую картину, и все это к тому же спрятано за исходное изображение за счет Лееринга (работы со слоями) z-index: значение;

img.fragment_1 {
   position: absolute;
   top: _px;
   left: _px;
}

5) После этого к каждому фрагменту вы обращаетесь к его идентиффикатору (id) и посредством javascript пишете функцию движения этих элементов, при событии onmouseover="name_function()" в желаемую сторону за счет transform: translate() или же меняя координаты top/right/bottom/left, каждому из них.

Ну и далее уже дело творчества, можно довести все это до порядочного результата применяя различного рода фильтры к кускам (прозрачность/затухание или же резкое изчезновение (их поведение после разлетания) дело уже вкуса и задачи

Пожалуйста 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">