Html CSS:Div往下跳

我遇到了一个主要问题，当缩小web浏览器的范围并将其向右对齐时，上一个重叠div跳到了前一个div的下方。我不知道怎么解决它。我试过谷歌等。发生了什么，为什么？我该如何解决这个问题

<div id="why-use-fastq-wrapper">
  <div id="why-use-fastq">
    <h3>WHY SHOULD WE USE FASTQ?</h3>
    <div id="why-use-fastq-img">
      <img src="images/bg2.png">
    </div>
  </div>

<div class="step-teaser2">
<div class="step-container2">
  <div class="left2"> 
        <div class="img2">
      <img src="images/sustainable.png" alt="" />
    </div>
    <div class="step-title2">TEXT TEXT TEXT</div>
    <p>TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT.</p>
  </div>
    <div class="right2">
       <div class="img2">
    <img src="images/easy.png" alt="" />
  </div>
        <div class="step-title2">TEXT TEXT TEXT</div>
    <p>TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT.</p>
    </div>
</div>

<div class="step-container2">
  <div class="left2"> 
      <div class="img2">
      <img src="images/plan.png" alt="" />
    </div>
    <div class="step-title2">TEXT TEXT TEXT</div>
    <p>TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT.</p>
  </div>
    <div class="right2">
        <div class="img2">
        <img src="images/stress.png" alt="" />
    </div>
    <div class="step-title2">TEXT TEXT TEXT</div>
        <p>TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT</p>
    </div>
    </div>
</div>


#why-use-fastq-wrapper h3{
  font-family: gill sans;
  font-size: 40px;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 40px;
}
#why-use-fastq-wrapper{
  margin-top: 0px;
  margin-bottom: 75px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
  #why-use-fastq{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
    #why-use-fastq-img{
    width: 100%;
    margin-bottom: 40px;
  }
    #why-use-fastq-img img{
      width: 100%;
      height: 100%;
    }
.step-teaser2 {
  margin-top: 100px;
  margin-left: 5%;
  margin-right: 5%;
}

.step-container2 {
  margin: 40px auto;

  max-width: 960px;
  width: 100%;

  height: 225px;  /* same as left/right */

  /* border: 1px solid black; */
}

.step-container2 .step-title2 {
  font-family: gill sans;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
}

.step-container2 p {
  font-family: times;
  font-size: 18px;
  font-weight: normal;
  text-align: justify;
}

.img2{
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 10%;
  margin-bottom: 15px;
}

.left2 {
  float: left;
  width: 47%;
}

.left2 img {
  text-align: center;
  width:100px;
}

.right2 {
  float: right;
  width: 47%;
}

.right2 img {
  text-align: center;
  width: 100px;
}


@media(max-width: 640px) {

    .step-container2 {
      margin: 0 auto; 
    }

    .step-container2 img {
      display: none;
    }

    .left2 {
      float: none;
      width: 100%;
    }
    .right2 {
      float: none;
      width: 100%;
    }

}

我们为什么要使用FASTQ？
文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本

文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本

#为什么要使用fastq包装器h3{
字体系列：gill sans；
字体大小：40px；
字体大小：正常；
文本对齐：居中；
文本转换：大写；
边缘底部：40px；
}
#为什么要使用fastq包装器{
边际上限：0px；
边缘底部：75px；
溢出：隐藏；
左边距：自动；
右边距：自动；
显示：块；
}
#为什么要使用fastq{
宽度：100%；
左边距：自动；
右边距：自动；
}
#为什么要使用fastq img{
宽度：100%；
边缘底部：40px；
}
#为什么要使用fastq img img{
宽度：100%；
身高：100%；
}
.步骤2{
边缘顶部：100px；
左缘：5%；
保证金权利：5%；
}
.step-container2{
利润率：40px自动；
最大宽度：960像素；
宽度：100%；
高度：225px；/*与左/右相同*/
/*边框：1px纯黑*/
}
.阶梯式容器2.阶梯式标题2{
字体系列：gill sans；
字体大小：24px；
字号：500；
文本对齐：居中；
}
.step-CONTAINER2P{
字体家族：时代；
字号：18px；
字体大小：正常；
文本对齐：对齐；
}
.img2{
左边距：自动；
右边距：自动；
显示：块；
宽度：10%；
边缘底部：15px；
}
.left2{
浮动：左；
宽度：47%；
}
.left2 img{
文本对齐：居中；
宽度：100px；
}
.对2{
浮动：对；
宽度：47%；
}
.right2 img{
文本对齐：居中；
宽度：100px；
}
@介质（最大宽度：640像素）{
.step-container2{
保证金：0自动；
}
.step-container2 img{
显示：无；
}
.left2{
浮动：无；
宽度：100%；
}
.对2{
浮动：无；
宽度：100%；
}
}

在640px断点处，将step-container2的高度设置为“自动”

@media(max-width: 640px) {    
    .step-container2 {
       height:auto;  // add this
       margin: 0 auto; 
    }
}

---

如果将“p”或“div”元素向左浮动，则可以解决此问题。这样就不会重叠。

请详细描述问题。我看不出你的代码有任何问题，请看最后一次跳水停留在最后一个位置的链接：到底是什么问题？也看不到问题。除非你是指一旦你缩小窗口，重叠的div？没错，当我缩小窗口时，问题就出现了，我真的不明白为什么。。。