Проблема в том, что вы используете класс. container
для элемента, который является родителем нижнего колонтитула. В терминах Bootstrap, класс контейнера ограничивает ширину содержимого до 1200px (1170px с 15px желобом с каждой стороны). Затем этот блок размером 1200 пикселей блокируется с помощью margin: 0 auto; стиль - отсюда и макет, который вы видите с желобами слева и справа.
Чтобы развернуть нижний колонтитул на полную ширину - вам нужно переместить его из соответствующего div - примените к нему класс container-fluid
, и он будет расширять всю ширину области просмотра.
Контейнерная жидкость позволяет элементу div расширять всю ширину области просмотра (хотя он все еще имеет отступ 15px влево и вправо, поэтому вам может потребоваться удалить его. На следующем снимке экрана показан нижний колонтитул полной ширины путем добавления класса container-liquid.