How to fix the section starting under a previous section?

I am totally confused about why my next section is starting there. I am using Bootstrap for the layout.
I have a service section under my hero image but when I start the next section under services, it starts again under the hero image and I don't know why.

In my services section I have 4 rows and two cols in it.
so I tried to add another row and put the next section it it and it worked but i don't want that.

html file

<div class="nav-wrapper">
    <input type="checkbox" id="nav-tlg" class="hidden">
    <label for="nav-tlg" class="nav-btn">
        <i></i>
        <i></i>
        <i></i>
      </label>
  <div class="logo">
      <h1>LOGO    </h1>
  </div>

  <nav>
<a href="#" id="collections-link">
  <div class="letter">H</div>
  <div class="letter">o</div>
  <div class="letter">m</div>
  <div class="letter">e</div>
</a>
<a href="#" class="active" id="new-link">
  <div class="letter">S</div>
  <div class="letter">e</div>
  <div class="letter">r</div>
  <div class="letter">v</div>
  <div class="letter">i</div>
  <div class="letter">c</div>
  <div class="letter">e</div>
  <div class="letter">s</div>
</a>
<a href="#" id="trending-link">
  <div class="letter">P</div>
  <div class="letter">o</div>
  <div class="letter">r</div>
  <div class="letter">t</div>
  <div class="letter">f</div>
  <div class="letter">o</div>
  <div class="letter">l</div>
  <div class="letter">i</div>
  <div class="letter">o</div>
</a>
<a href="#" id="popular-link">
  <div class="letter">B</div>
  <div class="letter">l</div>
  <div class="letter">o</div>
  <div class="letter">g</div>
</a>  
</nav>
</div>


<!-- Hero Image -->

  <div id="hero-container">
    <div class="hero-content flex-center">
        <h1>
           <span>REFRESH</span> YOUR WEBSITE
          </h1>
    </div>
  </div>
  <section>
  <div class="services- container-fluid" id="service-container">
    <div class="row  srv-content">
      <div class="col-lg-5 col-sm-12 text-center">
        <h1 class="srv-heading">Minimal Design</h1>   <p class="srv-subheading">LESS is MORE</p>

        <p class="srv-info">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
        </p>
      </div>
      <div class="col-lg-7 col-sm-12">
        <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
      </div>
    </div>

    <div class="row  srv-content">
        <div class="col-lg-7 col-sm-12">
            <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
          </div>
      <div class="col-lg-5 col-sm-12 text-center">
        <h1 class="srv-heading">SEO Ready</h1>   <p class="srv-subheading">LESS is MORE</p>

        <p class="srv-info">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
        </p>
      </div> 
    </div>

    <div class="row  srv-content">
        <div class="col-lg-5 col-sm-12 text-center">
          <h1 class="srv-heading">Superfast Page Load</h1>   <p class="srv-subheading">LESS is MORE</p>

          <p class="srv-info">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
          </p>
        </div>
        <div class="col-lg-7 col-sm-12">
          <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
        </div>
      </div>

      <div class="row  srv-content">
          <div class="col-lg-7 col-sm-12">
              <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
            </div>
        <div class="col-lg-5 col-sm-12 text-center">
          <h1 class="srv-heading">Lead Generation</h1>   <p class="srv-subheading">LESS is MORE</p>

          <p class="srv-info">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
          </p>
        </div> 
      </div>  
  </div>
</section>


<!--Why work with us comparison section-->

<section class="container-fluid">
  <div class="row">
    <h1>hjdfhsldjf</h1>
  </div>
</section>

css file

#hero-container{
    background-image: url('../assets/imgs/heroimage.gif');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    .hero-content{

        h1{
            color: black;
            position: absolute;
            top: 25%;
            font-size: 4vw;
            span{
                color: green;
                font-weight: bold;

            }
        }
    }

}

.services-{
    height: 50vh;
    padding-top: 150px;
    padding-bottom: 40px; 

    .srv-content{
        padding-top: 7%;
        padding-bottom: 7%;

        .srv-heading{
            font-weight: bold;
            margin-top: 100px;
            padding: 0 5px;
        }

        .srv-subheading{
            margin-top: 5px;
            font-size: 15px;
        }
        .srv-info{
            margin-top: 45px;
            padding: 40px; 
            font-size: 20px;
            font-weight: 400;
        }
    }
}

and I want to add next section below it but its not working