CSS: Div прыгает вниз

Question

У меня возникла серьезная проблема с последним перекрывающимся div, спрыгнувшим ниже, прежде чем сузить веб-браузер и тем самым выровнять их вправо. Я не знаю, как его решить. Я пробовал Google и т. Д. Что происходит и почему? И как я могу это решить?

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

} 

Answer 1

Набор .step-container2 «s высота "авто" в вашем 640px точки останова;

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

Answer 2

Вы можете решить эту проблему, если вы поплаваете с помощью элемента 'p' или 'div' слева. Таким образом, он не перекрывается.