Почему container выходит за пределы header?

Question

[Locket]

Блок container выходит за пределы блока header и заходит уже в другую секцию, при этом останавливается только когда его длина, достигает другой container. Из-за всей этой шляпы, элементы с absolute и bottom: 0 выстраиваются у другой секции. Есть решения по поводу этого всего?

HTML код

<div class='wrapper'>
    <header class="header">
        <div class="container" id='header_container'>
            <div class="header_content">
            
            </div>
        </div>
    </header>
    <section>
        ...
    </section>
</div>

CSS код

.container{
	width: 100%;
	height: 100%;
	max-width: 1185px;
	margin: 0 auto;
}
#header_container{
        position: relative;
}
.header{
	height: 100vh;
	background: url('../img/header_right.jpg') right 0 top 0, url('../img/header_left.jpg') left 0 top 30% / cover;
	background-repeat: no-repeat;
	padding: 27px 34px 0 34px;
	position: relative;
}
.wrapper{
	height: 100vh;
	display: flex;
	flex-direction: column;
}

Answer 1

[Jarosik Cobain]

Может быть проблема в height у хедера, вместо 100vh, не уверен, но мб что-то другое пробовать или без высоты вообще работать