html - 如何修复从上一节开始的节？

Question

我完全不明白为什么我的下一部分要从那里开始。我正在使用 Bootstrap 进行布局。
我的主图下有一个服务部分，但当我在服务下开始下一个部分时，它又在主图下开始，我不知道为什么。

在我的服务部分，我有 4 行和两列。
所以我尝试添加另一行并将下一部分放入它并且它有效但我不想要那样。

html文件

<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文件

#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;
        }
    }
}

我想在它下面添加下一部分，但它不起作用

Answer 1

非常小的错误。您已将 services- 的高度限制为 50vh。

.services- {
    height: 50vh;
}

我猜你是想给 srv-content 50vh 的高度。

还有额外的编辑，让你的 hero-container 相对定位，这样你的 h1 里面(绝对定位)就不会超出 英雄容器。

Here是一个带有评论的 fiddle 。