Qurel

Привет.

Строчка 21, проблема здесь:

highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;});

У вас "ховер" из-за "${coords.top}px" едет вниз, поправьте на "`translate(${coords.left}px, 0px)`;" или "`translateX(${coords.left}px)`;"

alt+ctr+s Появится окно, затем Editor->color & fonts

Самое простое продублировать - один скрыть другой показать
в медиа запросе скрыть тот что не нужен показать тот что нужен

как-то так можно (медиа замените на свои):

if (window.matchMedia('(max-width: 767px)').matches) {
    $(".header-top").append($('.logo'));
} else {
    $(".header-main").append($('.logo'));
}

append заменяйте на свой код в необходимости от положения логотипа внутри .header-main и .header-top

хотя я бы дублировал лого и показывал/скрывал их медизапросами

задайте ему flex-shrink: 0;

body {
    overflow-x: hidden;
}

Все равно что ширина между блоками меньше, блоки сделать relative, стрелки позиционируй absolute и будет тебе счастье!
Я бы сделал absolute left: 100%; margin-left: (половина от отступа)

Проблема не в таблице (что вам и показал вынос кода в песочницу), проблема выше -- в общем контейнере.

@media screen and (max-width: 750px)
    .science__wrap {
        /* flex-wrap: wrap;  -- не нужно тут это */ 
        flex-flow: column;  /* вот это нужно; нужно сменить ось flex'а */ 
    }
}

При переключении класс active нужно удалять со всех ссылок, а добавлять только кликнутой
https://codepen.io/anon/pen/vQwKMY

function resultPlus() {
  var
    number1  = document.getElementById('number-1').value,
    number2  = document.getElementById('number-2').value,
    plus     = number1 + number2;
  result_plus = document.getElementsByName('result_plus')[0];
  result_plus.innerHTML = plus;
}

У списков меню и подменю нужно сделать прозрачную “подложку” из псевдоэлемента （before или after）, выступающую за на несколько пикселей. Это увеличит активную область, и в случае незначительного выхода курсора за контур самого меню, оно скраваться не будет.