How to place two divs on top of an image? The parent is relative, the children are absolute, but it still doesn't work, what's wrong?

Question

Layout

<section>
    <div class="banner">
        <div class="banner__background">
            <img src="img/background-img.png" alt="" class="banner__background-img">

        <div class="banner__logo">
            <img src="img/background-logo.png" alt="" class="banner__logo-img">
        </div>
        <div class="banner__text">
            No mazām lietām rodas lielas.
        </div>
        </div>
    </div>
</section>

.banner{
  &__logo{
    position: absolute;
    text-align: center;
    width: 100%;
    margin-top: 328px;
    &-img{
      vertical-align: middle;
    }
  }
  &__text{
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: 'Spartan-Medium', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 23px;
    line-height: 26px;
    margin-top: 550px;
    letter-spacing: 0.145em;
    color: #888383;
  }
  &__background{
    position: relative;
    width: 100%;
    //background-image: url("../img/background-img.png");

    &-img{
      width: 100%;
      //background-image: url("../img/background-img.png");
    }
  }
}

Answer 1

relative should be on .banner