Landing page - sorting page without positioning - position

Question

i'm trying to make landing page / with big hero picture (contains two png images over each other) and with some button and some text.
1.I try to create it with positioning absolute and relative / but these values gives me some problem with my responsive version. Also i got problem with other design stuff under the hero section. I really dont know how to sort section of landing page without positioning.
2.I also have small triangle in the middle of hero image / i use it as a pseudoelement / but when i use media queries this triangle floats instead of staying in the fix position.
Thank you very much for your advice.
<section class="header_container">
<div class="section_img">
<div class="bg_layer"><img src="images/main_bg.png" alt=""></div>
<div class="overlay"><img src="images/woman.png" alt=""></div>
</div>
<div class="header_wrapper hero">
<img src="images/logo_ap.svg" class="logo" alt="logo">
<h1>Lorem ipsum dolor sit amet consectetur,<br>
<span> adipisicing elit. Repellendus, nobis.</span></h1>
<button class="btn_main">Lorem ipsum</button>
<p class="btn_code">Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ut corrupti laudantium.</p>
</div>
</section>
.header_container {
max-width: 1255px;
margin: 0 auto;
position: relative;
}
.bg_layer{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.overlay{
width: 100%;
position: absolute;
top: 0;
}
.header_wrapper{
position: relative;
top: 520px;
left: 8rem;
}
.logo{
position: absolute;
top: -420px;
}
.header_wrapper.hero h1{
position: absolute;
top: -290px;
font-family: "Poppins", sans-serif;
font-size: 40px;
font-weight: 400;
color: #fff;
line-height: 1.2;
}
.header_wrapper h1 span{
font-weight: 900;
}
.btn_main {
position: absolute;
top: -130px;
font-size: 20px;
font-weight: 400;
padding: 15px 40px;
background-color: var(--green);
border-radius: 4px;
}
.header_wrapper .btn_code{
position: absolute;
top: -70px;
left: 50px;
font-size: 14px;
text-decoration: underline;
}
.btn_code a{
color: #ff7d7d;
}
.header_wrapper p{
position: absolute;
top: 40px;
font-size: 14px;
color: #ff7d7d;
line-height: 1.8;
}
.header_wrapper:after {
content:'';
position: absolute;
bottom: -180px;
left: 45%;
overflow: hidden;
border-top: solid 30px var(--red);
border-left: solid 30px transparent;
border-right: solid 30px transparent;
}