Почему у блока с 100% шириной ширина — не 100%?

Question

[Егор Антропов]

Есть блок

скриншот

css

.background
	position: absolute
	z-index: -1
	top: 0
	width: 100%
	height: 850px

.transparent
	position: absolute
	width: 100%
	height: 100%
	background: rgba(0,20,50,0.6)

.image
	position: absolute
	width: 100%
	height: 100%
	background: url(../img/main-img.png)
	​​​​​​​background-repeat: no-repeat
	background-position: center center
	background-size: cover

.fog
	position: absolute
	bottom: 0
	width: 100%
	height: 213px
	background: url(../img/fog.png)

HTML

<section class="background">
		<div class="image"></div>
		<div class="transparent"></div>
		<div class="fog"></div>
	</section>

Этот блок находится в body с минимально шириной в 1140px.
Почему-то при уменьшении страницы меньше 1140 пикселей начинает уменьшаться. Почему? Как исправить?

Answer 1

[ⓒⓢⓢ]

честно говоря много причин может быть и без песочницы трудно однозначно сказать, но всё же предположение напишу.
viewport (окно) у вас имеет размер 986px
body имеет размер min-width: 1140px;
.background имеет позицию absolute и выноситься в отдельный контекст - тут ключевой момент.
т.к. блоки html и body у вас в другом контексте (в основном), то для блока .background позиция и размеры берутся из параметров viewport браузера.
Итог:
попробуйте для body указать position: relative;

Comments

[Егор Антропов]

Помогло. Спасибо что объяснили, а не просто решили!

Answer 2

[Андрей Никифоров]

явно что-то с кнопкой

Comments

[Егор Антропов]

Почему?