Bootstrap布局问题：新增Section未在Services区块下方正常显示的解决方法

Hey, let's get that new section sitting properly below your Services block instead of overlapping the Hero Image! The problem comes down to two easy-to-fix issues in your code:

1. Typos in Your CSS Class Names #

Look at your Services container in the HTML: you wrote services- container-fluid (with an extra space and trailing dash). But your CSS selector is .services-—so the styles for your Services block aren't being applied at all! That means the Services section isn't taking up the space it should, and your new section is sliding up into the Hero area.

2. Misplaced Absolute Positioning & Fixed Height #

• Your Hero Content's h1 uses position: absolute but its parent .hero-content doesn't have position: relative set. This makes the heading position itself relative to the entire page instead of the Hero container, which can throw off layout flow.
• You set height: 50vh on the Services block, which is way too small for four rows of content. This forces the Services section to collapse, making room for the new section to overlap.

Corrected Code #

Updated HTML (Fix Class Name) #

<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> 
  <!-- Fixed class name: removed extra space and trailing dash -->
  <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>

Updated CSS (Fix Positioning & Height) #

#hero-container{ 
  background-image: url('../assets/imgs/heroimage.gif'); 
  background-size: cover; 
  background-position: center center; 
  background-repeat: no-repeat; 
  width: 100%; 
  height: 100vh; 
  /* Add relative positioning to contain the absolute heading */
  position: relative;

  .hero-content{ 
    /* Center content properly without breaking layout flow */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    h1{ 
      color: black; 
      font-size: 4vw; 
      span{ 
        color: green; 
        font-weight: bold; 
      } 
    } 
  } 
} 

/* Fixed selector to match the corrected HTML class */
.services-container-fluid{ 
  /* Remove fixed height so content can expand naturally */
  padding-top: 150px; 
  padding-bottom: 40px; 

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

    .srv-heading{ 
      font-weight: bold; 
      margin-top: 50px; /* Adjust to prevent overflow on smaller screens */
      padding: 0 5px; 
    } 

    .srv-subheading{ 
      margin-top: 5px; 
      font-size: 15px; 
    } 

    .srv-info{ 
      margin-top: 45px; 
      padding: 0 40px; /* Remove vertical padding to reduce excess height */
      font-size: 20px; 
      font-weight: 400; 
    } 
  } 
}

Key Fixes Explained #

1. Class Name Correction: By fixing the typo in the Services container class, your CSS styles now apply correctly, giving the section the padding and structure it needs.
2. Contained Absolute Positioning: Adding position: relative to #hero-container ensures the heading stays inside the Hero area, and using transform: translate for centering is a cleaner way that doesn't disrupt layout flow.
3. Dynamic Height for Services: Removing the fixed 50vh height lets the Services section expand to fit all four rows of content, so the new section has a clear space to sit below it.
4. Tweaked Spacing: Adjusting margins and padding prevents content from overflowing or creating unnecessary gaps.

After these changes, your new "Why work with us" section will sit neatly below the Services block, no overlap with the Hero Image!

内容的提问来源于stack exchange，提问作者Justin