iBird Rose

там сделано через map area. вот и гугли как работает htmlbook.ru/html/area
примеров тоже полно https://codepen.io/josegh/pen/KEjNKJ

потому что картинка логотипа еще не загрузилась. задай блоку где у тебя лого min-height к примеру

потому что у тебя много вещей выбиваются за границы.
к примеру в разделе "Амбассадоры". ну и ниже блоки тоже текст выпирает. поправишь все эти вещи - станет нормально

Вопрос такого плана, есть макет, ширина которого 1920px
Но есть контейнер 1600.

Это значит что что тебе не нужен container для 1920. потому что это обычные 100%. т.е. просто обычный div итак будет работать так как тебе нужно.
для этого и отступы у container. потому что он создан для контентной части. чтобы когда ширина экрана будет равна контейнеру - текст не прилипал к бокам экрана.

А в остальном - открываешь sass исходники, файл _variables.scss и работаешь с двумя переменными: $grid-breakpoints и $container-max-widths как хочешь

ну гуглится же легко https://codepen.io/cadimchers/pen/KNNMBr
плюс подобные вопросы уже были Slick slider progress bar?

чего именно ты хочешь добиться в итоге?
для flex для этих целей есть https://developer.mozilla.org/ru/docs/Web/CSS/flex...
НО и в этом случае ты не увидишь 290px и 150px. потому что их ограничивает родительский элемент .form.search который.
задай к примеру для .form.search {width: 600px;} и с flex-basis будет работать

https://habr.com/ru/post/126207/

берешь тот же https://fengyuanchen.github.io/cropperjs/ и при загрузке заставляешь юзера выбрать область, которая будет отображаться

тебе нужно из scss исходников бутстрапа скомпилировать css. и его уже подключить к странице.
как скомпилировать - вариантов куча. плагины для ide и редакторов, отдельные программы для ОС, npm зависимости gulp, webpack и пр. гуглится тоже легко

тебе не контейнер нужно убрать, а элемент, который выпирает из этого контейнера пофиксить