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;
}

Так?

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

А что, думаете функция сама себя должна привязать к чекбоксу в качестве обработчика события 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;
  }
}

Так:

$('body').html(Array.from({ length: 4 }, (n, i) => `
  <svg width="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="border" cx="20" cy="20" r="18"/>
    <circle class="fill" cx="20" cy="20" r="18"/>
    <text x="12" y="25" class="small">0${i + 1}</text>
  </svg>
`));


const $elements = $('.fill');

function animateElem(index) {
  $elements.removeClass('animation').eq(index).addClass('animation');
}

$(document).on('animationend', function(e) {
  $(e.target).removeClass('animation');
  const index = (1 + $elements.index(e.target)) % $elements.length;
  animateElem(index);
});

$(document).on('click', 'svg', function(e) {
  animateElem($elements.index($('.fill', this)));
});

.border {
  fill: transparent;
  stroke: #ccc;
  stroke-width: 2px;
}

.fill {
  fill: transparent;
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transform: rotate(-90deg);
  transform-origin: center;
}

.animation {
  animation: spin 2s both linear;
}

@keyframes spin {
  to {
    stroke-dashoffset: 1;
  }
}

??