0xD34F

Мне кажется, вы пытаетесь заниматься какой-то ерундой. Гораздо проще будет вешать/снимать класс, вместо того, чтобы напрямую модифицировать body.style.

UPD. Но конечно можно и модифицировать. Только добавлять/убирать ничего не надо, всегда вычисляйте значения свойств целиком.

Не указан border-style.

Вообще, можете их все вместе указывать: border: 2px solid #ccc;.

Потому что есть правило, имеющее больший приоритет. Погуглите "специфичность селекторов css".

<div id="map" class="black-and-white"></div>

.black-and-white {
  filter: grayscale(100%);
}

document.querySelector('#map').addEventListener('click', function() {
  this.classList.remove('black-and-white');
}, { once: true });

jsfiddle.net/0uays3d7

По умолчанию задан padding-left для ul. 40 пикселей.

Указывайте nth-child и для родительского блока. Типа так.

UPD. Ну и ещё посмотрите в сторону использования препроцессоров - у вас тут получается много дублирующегося кода, можно же всё сократить.

Так:

img {
  filter: hue-rotate(180deg) saturate(10);
}

??

И цвет не должен меняться как градиент. Сначала 90% черный #000 потом 10% красный

И тем не менее - это можно сделать именно градиентом:

background: linear-gradient(to right, black, black 90%, red 90%);

Никакую ширину под контент подстраивать не надо. Расположите элементы в обратном порядке - тогда заработает селектор .myLink:hover ~ .marker, а чтобы они отображались по-старому, можно использовать flex. Как-то так.

Смещайте сайдбар, а не main (ну и кнопку открытия-закрытия тоже - поскольку она вне сайдбара).

Изменяем назначение классов:

- <main className={active ? 'move-to-left' : ''}>
+ <main>

- <div className="sidebar">
+ <div className={'sidebar ' + (active ? 'move-to-left' : '')}>

- <NavRight onClick={this.toggleActive} buttonClass={!active ? 'active' : ''} navClass="hidden-xs" />
+ <NavRight onClick={this.toggleActive} buttonClass={active ? 'active move-to-left' : ''} navClass="hidden-xs" />

И стили:

+ body {
+   overflow: hidden;
+ }

.sidebar {
  ...
- z-index: 1;
- right: 0;
+ z-index: 3;
+ right: -400px;
+ transition: all .7s ease;

UPD. Вынесено из комментариев:

Имелось в виду, что контент тоже двигается при смещении sidebar, но не убегает полностью в левый угол, а остается по центрy оставшейся ширины

Вместо того, чтобы делать transform, меняйте ширину. Как-то так.

<div class="box">
  <div class="inbox1"></div>
  <div class="inbox2"></div>
</div>

.box {
  display: flex;
}

.inbox1,
.inbox2 {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transition: all 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.inbox1 {
  background: red;
  transition-delay: 0ms;
}

.inbox2 {
  background: green;
  transition-delay: 200ms;
}

.box:hover .inbox1 {
  transform: translate(200px, 0);
  transition-delay: 200ms;
}

.box:hover .inbox2 {
  transform: translate(200px, 0);
  transition-delay: 0ms;
}

Так?

О каких классах идёт речь:

const outerClass = 'item';
const innerClass = 'hidden';

Как скрыть элемент:

const hide = el => el.style.display = 'none';
// или
const hide = el => el.style.setProperty('visibility', 'hidden');
// или
const hide = el => el.style.cssText += 'opacity: 0';
// или
const hide = el => el.setAttribute('style', 'transform: scale(0)');
// или
const hide = el => el.hidden = true;

Скрываем:

document.querySelectorAll(`.${innerClass}`).forEach(n => {
  if (n = n.closest(`.${outerClass}`)) {
    hide(n);
  }
});

// или

for (const n of document.getElementsByClassName(outerClass)) {
  if (n.querySelector(`.${innerClass}`)) {
    hide(n);
  }
}

UPD. Наконец-то дождались, теперь js тут использовать необязательно:

.item:has(.hidden) {
  display: none;
}

что не так в скрипте

А что, думаете функция сама себя должна привязать к чекбоксу в качестве обработчика события change? Нет, так не будет - это ваша работа.

можно ли его сделать проще

Можно:

document.querySelector('#play').addEventListener('change', e => {
  document.querySelector('.block').style.opacity = +e.target.checked;
});

Или, вообще без js:

#play:checked ~ div > .block {
  opacity: 1;
}

Заменить:

.item:hover на .item-wrapper:hover .item

.item-wrapper:hover + .item-wrapper:after на .item-wrapper:hover::after

потому что отсутствуют content и display

h1::before {
  content: "";
  background-image: url(http://via.placeholder.com/50x50);
  display: inline-block;
  width: 50px;
  height: 50px;
}

UPD. Вынесено из комментариев:

Если увеличивать width или height, то картинка повторяется.
Как можно отключить повтор?

Можно картинку растянуть:

background-size: cover;

А можно не изменяя размера разместить по центру, например:

background-position: center;
background-repeat: no-repeat;

Элементы с float не влияют на высоту родительского элемента, а других внутри у .div_info у вас нет - так что его высота равна нулю. А поскольку сам .div_info является единственным дочерним элементом .midd_wrap - то и последний также имеет нулевую высоту. Т.е., бэкграунд на самом деле есть, просто вы его не видите.

<div id="e1">1</div>
<div id="e2">22</div>
<div id="e3">333</div>
<div id="e4">4444</div>
<div id="e5">55555</div>

#e1, #e2, #e3, #e4, #e5 {
  position: absolute;
  top: 0;
  left: 0;
  animation: change 1250ms infinite steps(1);
}
#e2 { animation-delay: -1000ms; }
#e3 { animation-delay: -750ms; }
#e4 { animation-delay: -500ms; }
#e5 { animation-delay: -250ms; }

@keyframes change {
  0%, 20% {
    opacity: 1;
  }
  20%, 100% {
    opacity: 0;
  }
}