これはなぜ正しく整列されていないのですか？ CSS

Question

どのようにスペースを適切にすることができますか？画面が赤い円で示されているようにサイズが変更されると、大きなギャップがあります。私はそれが今何をしているのではなく、他のdivと正しく整列したいと思っています。ありがとう！

#howItWorks h2 { 
 
    margin-bottom: 30px; 
 
} 
 

 
.services { 
 
    position: relative; 
 
} 
 
.services .service { 
 
    padding: 30px 15px 30px; 
 
    text-align: center !important; 
 
    z-index: 1; 
 
} 
 
.services .service .service-icon { 
 
    color: #292929; 
 
    margin-top: 15px; 
 
    -moz-transition: color 0.3s; 
 
    -o-transition: color 0.3s; 
 
    -webkit-transition: color 0.3s; 
 
    transition: color 0.3s; 
 
} 
 
.services .service p { 
 
    margin-bottom: 20px; 
 
    max-width: 385px; 
 
    margin: 0 auto auto; 
 
} 
 
.services .service h3 { 
 
    font-size: 1.2em; 
 
    font-weight: bolder; 
 
    position: relative; 
 
    padding: 10px 0 15px; 
 
    margin-bottom: 10px; 
 
    text-transform: capitalize; 
 
} 
 
.services .service h3:after { 
 
    content: ""; 
 
    width: 40px; 
 
    height: 1px; 
 
    background: #dee8ed; 
 
    left: 50%; 
 
    margin-left: -20px; 
 
    position: absolute; 
 
    bottom: 5px; 
 
} 
 
.services .service:hover { 
 
    z-index: 2; 
 
    -moz-box-shadow: 0 0 30px #dcdcda; 
 
    -webkit-box-shadow: 0 0 30px #dcdcda; 
 
    box-shadow: 0 0 30px #dcdcda; 
 
    background: #0084DD; 
 
    color: white; 
 
} 
 
.services .service:hover a { 
 
    color: orange; 
 
} 
 
.services .service:hover .animate-icon { 
 
    color: white; 
 
    -webkit-animation: rubberBand 1s 0.2s ease both; 
 
    -moz-animation: rubberBand 1s 0.2s ease both; 
 
    -ms-animation: rubberBand 1s 0.2s ease both; 
 
    -o-animation: rubberBand 1s 0.2s ease both; 
 
    animation: rubberBand 1s 0.2s ease both; 
 
} 
 
@media screen and (max-width: 992px) { 
 
    .services { 
 
    margin-top: 35px; 
 
    } 
 
} 
 
@media screen and (max-width: 992px) { 
 
    .services .service .service-icon { 
 
    margin-top: 5px !important; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<section id="howItWorks"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <h2 class="section-heading">How it Works</h2><br> 
 
     </div> 
 
    </div> 
 
    <div class="services"> 
 
     <div class="row"> 
 
     <div class="service col-md-3 col-sm-6 col-xs-12" > 
 
      <div class="fa-4x service-icon icon icon-Book animate-icon"></div> 
 
      <h3>Step one</h3> 
 
      <p>Tell us the textbooks<br> you'd like to sell<a href="sell.html"> here.</a><br><br></p>  
 
     </div> 
 
     <div class="service col-md-3 col-sm-6 col-xs-12 " > 
 
      <div class="fa-4x service-icon icon icon-Like animate-icon"></div> 
 
      <h3>Step two</h3> 
 
      <p>Get an instant quote for all your textbooks.</p> 
 
      <br> 
 
     </div> 
 
     <div class="service col-md-3 col-sm-6 col-xs-12"> 
 
      <div class="fa-4x service-icon icon icon-Truck animate-icon"></div> 
 
      <h3>Step three</h3> 
 
      <p>Mail us your textbooks for <i>free</i> using a prepaid shipping label we send you for use with Canada Post or by courier.</p> 
 
     </div> 
 
     <div class="service col-md-3 col-sm-6 col-xs-12"> 
 
      <div class="fa-4x service-icon icon icon-Dollars animate-icon"></div> 
 
      <h3>Step four</h3> 
 
      <p>Get paid by an Interac E-Transfer or Paypal once the textbooks are received by us.</p> 
 
      <br> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

ブロックに同じ高さを設定してみてください、これは動作します。

.services .service { 
    height: 250px; 
    ... 
} 

#howItWorks h2 { 
 
    margin-bottom: 30px; 
 
} 
 

 
.services { 
 
    position: relative; 
 
} 
 
.services .service { 
 
    height: 250px; 
 
    padding: 30px 15px 30px; 
 
    text-align: center !important; 
 
    z-index: 1; 
 
} 
 
.services .service .service-icon { 
 
    color: #292929; 
 
    margin-top: 15px; 
 
    -moz-transition: color 0.3s; 
 
    -o-transition: color 0.3s; 
 
    -webkit-transition: color 0.3s; 
 
    transition: color 0.3s; 
 
} 
 
.services .service p { 
 
    margin-bottom: 20px; 
 
    max-width: 385px; 
 
    margin: 0 auto auto; 
 
} 
 
.services .service h3 { 
 
    font-size: 1.2em; 
 
    font-weight: bolder; 
 
    position: relative; 
 
    padding: 10px 0 15px; 
 
    margin-bottom: 10px; 
 
    text-transform: capitalize; 
 
} 
 
.services .service h3:after { 
 
    content: ""; 
 
    width: 40px; 
 
    height: 1px; 
 
    background: #dee8ed; 
 
    left: 50%; 
 
    margin-left: -20px; 
 
    position: absolute; 
 
    bottom: 5px; 
 
} 
 
.services .service:hover { 
 
    z-index: 2; 
 
    -moz-box-shadow: 0 0 30px #dcdcda; 
 
    -webkit-box-shadow: 0 0 30px #dcdcda; 
 
    box-shadow: 0 0 30px #dcdcda; 
 
    background: #0084DD; 
 
    color: white; 
 
} 
 
.services .service:hover a { 
 
    color: orange; 
 
} 
 
.services .service:hover .animate-icon { 
 
    color: white; 
 
    -webkit-animation: rubberBand 1s 0.2s ease both; 
 
    -moz-animation: rubberBand 1s 0.2s ease both; 
 
    -ms-animation: rubberBand 1s 0.2s ease both; 
 
    -o-animation: rubberBand 1s 0.2s ease both; 
 
    animation: rubberBand 1s 0.2s ease both; 
 
} 
 
@media screen and (max-width: 992px) { 
 
    .services { 
 
    margin-top: 35px; 
 
    } 
 
} 
 
@media screen and (max-width: 992px) { 
 
    .services .service .service-icon { 
 
    margin-top: 5px !important; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<section id="howItWorks"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <h2 class="section-heading">How it Works</h2><br> 
 
     </div> 
 
    </div> 
 
    <div class="services"> 
 
     <div class="row"> 
 
     <div class="service col-md-3 col-sm-6 col-xs-12" > 
 
      <div class="fa-4x service-icon icon icon-Book animate-icon"></div> 
 
      <h3>Step one</h3> 
 
      <p>Tell us the textbooks<br> you'd like to sell<a href="sell.html"> here.</a><br><br></p>  
 
     </div> 
 
     <div class="service col-md-3 col-sm-6 col-xs-12 " > 
 
      <div class="fa-4x service-icon icon icon-Like animate-icon"></div> 
 
      <h3>Step two</h3> 
 
      <p>Get an instant quote for all your textbooks.</p> 
 
      <br> 
 
     </div> 
 
     <div class="service col-md-3 col-sm-6 col-xs-12"> 
 
      <div class="fa-4x service-icon icon icon-Truck animate-icon"></div> 
 
      <h3>Step three</h3> 
 
      <p>Mail us your textbooks for <i>free</i> using a prepaid shipping label we send you for use with Canada Post or by courier.</p> 
 
     </div> 
 
     <div class="service col-md-3 col-sm-6 col-xs-12"> 
 
      <div class="fa-4x service-icon icon icon-Dollars animate-icon"></div> 
 
      <h3>Step four</h3> 
 
      <p>Get paid by an Interac E-Transfer or Paypal once the textbooks are received by us.</p> 
 
      <br> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>