image not stacking behind the features section?

Question

full project

    .bo {
  transform: rotate(25deg);
  height: 600px;
  position: relative;
  padding-top: 80px;
  top: 100px;
  #features {
    margin: 50px;
    text-align: center;
    position: relative;
    z-index: 1;

<div class="row">
  <div class="col-lg-6  col-md-12">
    <h1 class="heading">Meet new and interesting dogs nearby.</h1>
    <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i>
                    Download</button>
    <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i>Download</button>
  </div>

  <div class="col-lg-6  col-md-12">
    <img class="bo" src="images/iphone6.png" alt="iphone-mockup">
  </div>
</div>
</div>
</section>


<!-- Features -->

<section id="features">
  <div class="fluid-container">
    <div class="row">
      <div class="col-lg-4">
        <span class="icons"> <i class="fas fa-check-circle"></i> <br></span>


        <h3 class="tutorial">Easy to use.</h3>
        <p class="description">So easy to use, even your dog could do it.</p>
      </div>
      <div class="col-lg-4">

        <span class="icons"> <i class="fas fa-bullseye"></i> <br></span>

        <h3 class="tutorial">Elite Clientele</h3>
        <p class="description">We have all the dogs, the greatest dogs.</p>
      </div>
      <div class="col-lg-4">

        <span class="icons"> <i class="fas fa-heart"></i> </i> <br></span>

        <h3 class="tutorial">Guaranteed to work.</h3>
        <p class="description">Find the love of your dog's life or your money back.</p>
      </div>
    </div>
  </div>
</section>

image is not getting stacked behind features section even when the features section has got a z index of one and image has gone none. and both are given a position of relative also still it is not getting stacked behind. help out to get it behind the features section

Answer 1

       .bo {
      transform: rotate(25deg);
      height: 600px;
      position: relative;
      padding-top: 80px;
      top: 100px;
background-color:green;
      #features {
        margin: 50px;
        text-align: center;
        position: relative;
        z-index: 1;
background-color:red;

after adding bg color actually it is getting stacked behind the features section but due to margin it is not seen use pesticide to view it and remove margin then problem will be solved