Светлана

.menu-imgblock {
  flex-shrink: 0;
}

В первом случае у вас не верное сравнение

- if (event.type = "click") 
+ if (event.type === "click") 

- if (event.type = "dblclick")
+ if (event.type ==== "dblclick")

Во втором случае зачем вешаете новый обработчик клика на элемент li? Этого делать не нужно. Достаточно:

if (elemTarget === 'li') {
    event.target.textContent += '!'
  }

1. Потому что скроллбар имеет ширину.
Поэтому контентную часть центруете по центру экрана, т.к. контентная ширина всегда меньше пресловутых 1920px.
2. не парьтесь, используйте конкретный девайс в DevTools.
3. да, scroll-behavior: smooth; или скриптом.
3-а. да, для разных разрешений и для разных экранов (с разной плотностью пикселей) - разные картинки.

4. Первый экран, видимо предполагался на весь экран.
У вас это не так.
Попробуйте width =100vw; height = 100vh;
5. .main__img - искажаются пропорции изображения
6. .intro__scroll scroll-down-btn - это button
А т.к. это кнопка, то img там делать нечего.
Это button, а внутри svg
7. ну и семантики добавить в разметку, при желании.
8. о валидаторе не забывайте -).