iBird Rose

vertical-align: top; пропиши для .part

много чего выпирает за рамки body.
к примеру из того что нашел - .linew, .shapka h1, .shapka h2, .shapka h3
и картинка телефона под h заголовками

а что тебя смущает? просто не засовывай хедер в .container и будет он у тебя на всю ширину.

form нельзя вкладывать внутрь form

https://www.w3.org/TR/html5/forms.html#the-form-element

Content model:
Flow content, but with no form element descendants.

Как затемнить картинку и наложить еще одну поверх нее?

height: 100vh; ?

ну тк ограничивай высоту у дропдауна и задай ему overflow-y: auto;

с регулярками было бы проще. а так к примеру так:
https://jsfiddle.net/tzx5zb1w/2/

https://jsfiddle.net/7ch3wz12/1/

1) идешь работать в офис, где есть нормальный фронтендер - научишься за пару месяцев
2) практика - практика - практика (ставишь себе цели и верстаешь. и пишешь скрипты)
3) идешь на какие нить курсы и находишь менторов.

плагин Single Page Nav Plugin убирает переходы.
вот тут есть опция filter https://github.com/ChrisWojcik/single-page-nav#options
вам она нужна
задайте класс для ссылок .external

<li class="nav-item"><a class="nav-link external" href="">Вконтакте</a></li>
<li class="nav-item"><a class="nav-link external" href="">Одноклассники</a></li>
<li class="nav-item"><a class="nav-link external" href="">НАПСАТЬ НАМ</a></li>

https://jsfiddle.net/aack5roj/

разделяешь сначала 8 на 4
а уже в нем делаешь свои контентные
https://jsfiddle.net/hqvo9nzy/

потому что после 1200px идет масштабирование, а не адаптирование. ты блоку задал фиксированную ширину в 1200px - он выходит за грани документа. в инспекторе посмотри где у тебя body заканчивается.
в двух словах - блок просто вышел за грани сайта. потому что ему некуда деваться.

p.s. если хочешь чтобы он дальше масштабировался нормально задай для body
body {min-width: 1200px;}

transition на градиент не работает
p.s. как вариант можешь сделать фон отдельным блоком. а текст - другим. и вешать opacity. и уже на opacity делать transition