Вы используете внешний интерфейс Bootstrap. Bootstrap уже имеет несколько предопределенных точек разрыва макета, особенно для класса .container, который в вашем случае оборачивает ваши изображения.
В частности, деления (div) с классом .container могут принимать одну из этих значений ширины, в зависимости от размера экрана:
Screen size | Container size
<576px | auto
≥576px | 540px
≥768px | 720px
≥992px | 960px
≥1200px | 1140px
В соответствии с таблицей выше, максимальная ширина .container div может быть 1140px, если размер экрана 1200px или выше.
Это в основном означает, что если вы откроете страницу в браузере шириной 1920px, .container div будет иметь ширину 1140px с центром в середине экрана.
Изображения внутри .container могут иметь ширину, равную div, в которой они находятся, поэтому они также ограничены максимумом 1140px. Это означает, что между .container div и краями экрана будет некоторое свободное пространство. 1920px - 1140px = 780px пустого пространства!
Вы хотите увеличить ширину ваших изображений до 100%, чтобы они правильно масштабировались от одного края экрана к другому, но вы обернули их в .container div, предопределенное Bootstrap, чтобы оно было 1440px, поэтому они никогда не смогут этого достичь. Для достижения этой цели вам нужно избавиться от ограничения 1140px, установленного Bootstrap для .container div.
Существует буквально сотни различных решений этой проблемы, и какое из них вы действительно используете, зависит от вашей цели проектирования, которую вы не очень хорошо определили, поэтому я не могу дать вам наиболее подходящее.
Самый простой и грязный обходной путь - просто переопределить класс Bootstrap с помощью этого CSS в вашей пользовательской таблице стилей.
@media (min-width: 1200px) {
.container {
max-width: 100%;
}
}
Тогда, конечно, стиль ваших изображений:
img {
width: 100%;
}