Александр Баранчугов

Встречный вопрос: а какие должны быть ширины и высоты у этих блоков и почему они должны отличаться?
Из скриптов совершенно непонятно какие стили определили для этих блоков

Проблема тут:

var id  = $(this).attr('href'),
     top = $(id).offset().top;

Ты получаешь id как значение атрибута href ссылки, далее полученное значение id ты подставляешь сюда: $(id).

Сама ошибка говорит о том, что значение id не подходит для использования в качестве селектора.
Проверь какие значения ты используешь для атрибута href

p.s.

In the first formulation listed above, jQuery() — which can also be written as $() — searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements:

Попробуй глянуть Ionicons

добавь в стили элементу .header__img свойство:

.header__img {
  margin-left: auto;
}

1. Нужно картинку установить как фон для блока, который растягивается всю ширину и высоту экрана
2. добавить блоку CSS-стили

background-size: cover;
  background-position: center center;

P.S.
значение cover - масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.