Вы полагаетесь на .container
в качестве основного родительского элемента сетки, но .container
является классом с фиксированной шириной. Независимо от пользовательского CSS, который вы пишете, .page
никогда не может быть больше ширины .container
, которая достигает максимума в 1140 пикселей при самой высокой точке прерывания, которую использует Bootstrap.
Если вы измените свой класс на .container-fluid
, он будет всегда использовать width:100%
. Это единственное изменение приведет к ширине вашего контейнера, охватывающей ширину области просмотра браузера.
Неясно, хотите ли вы, чтобы ваше темное навигационное меню охватывало 100% высоты, но для этого потребуются дополнительные объявления CSS. Я настоятельно рекомендую вам ознакомиться с документацией Bootstrap, касающейся его грид-системы, а также утилит flex-box для управления размерами.
Начальная загрузка 4.1.x Grid Documentation
Документация по программе Bootstrap 4.1.x Flex Box