Landing page - sorting page without positioning

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">
          <a href="#"><img src="images/logo_ap.svg" class="logo" alt="logo"></a>
          <h1>Lorem ipsum dolor sit amet consectetur,<br>
          <span> adipisicing elit. Repellendus, nobis.</span></h1>
          <button class="btn_main"><a href="#">Lorem ipsum</a></button>
          <p class="btn_code"><a href="#">Lorem ipsum</a></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;
}