ブートストラップのグリッドアライメント

Question

私のブートストラップグリッドが奇妙に動作している理由のいくつかを説明してもらえますか？

最終結果は以下の画像のようにする必要があります

しかし、私はそれをコーディングし、それにPSDバージョン鉱山対ブラウザのバージョンを確認するときは、何が起こっているのか...違うのですか？赤いボックスはブラウザのビュー（chrome）からのものです。

任意の手掛かり？

.facts { color: #fff; background: linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(https://s27.postimg.org/7kjcvsxc3/facts_bg.jpg) 0 0 no-repeat; background-size: cover; padding: 40px 0; width: 100%; min-height: 505px; } 
 
.facts-content { text-align: center; } 
 
.facts-content h3 { font-family: "Gotham-Book", sans-serif; font-size: 47px; line-height: 55px; padding: 0 5px; text-transform: uppercase; margin: 38px 0 41px 0; } 
 
.facts-content h3 span { color: #00c0ff; } 
 

 
.item h4 { font-family: "Gotham-Black", sans-serif; font-size: 40px; line-height: 49px; padding: 0 5px; } 
 
.item h4 > span { font-family: "Gotham-Light", sans-serif; } 
 
.item p { font-family: "Lato-Regular", sans-serif; font-size: 16px; line-height: 22px; padding: 0 5px; } 
 
.item a { display: block; margin-bottom: 27px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<section class="facts"> 
 
    <div class="container"> 
 
    <div class="facts-content"> 
 
     <h3>some <span>facts</span> about us</h3> 
 
     <div class="row"> 
 
     <div class="col-md-3 col-sm-3"> 
 
      <div class="item"> 
 
      <a href="#"> 
 
       <img src="https://s16.postimg.org/z29j3y5s1/ideas.png" width="124" height="124" title="someText" alt="someText"> 
 
      </a> 
 
      <h4>14<span>&#37;</span></h4> 
 
      <p>Proin hendrerit velit a lectus vel nibh tincidunt</p> 
 
      </div> 
 
      <!-- item --> 
 
     </div> 
 
     <!-- col-md-3 --> 
 

 
     <div class="col-md-3 col-sm-3"> 
 
      <div class="item"> 
 
      <a href="#"> 
 
       <img src="https://s16.postimg.org/4jjqizgld/green_earth.png" width="125" height="126" title="someText" alt="someText"> 
 
      </a> 
 
      <h4>25<span>&#37;</span></h4> 
 
      <p>Proin hendrerit velit a lectus vel nibh tincidunt</p> 
 
      </div> 
 
      <!-- item --> 
 
     </div> 
 
     <!-- col-md-3 --> 
 

 
     <div class="col-md-3 col-sm-3"> 
 
      <div class="item"> 
 
      <a href="#"> 
 
       <img src="https://s16.postimg.org/4yzlpqrwh/leafs.png" width="126" height="126" title="someText" alt="someText"> 
 
      </a> 
 
      <h4>75<span>&#37;</span></h4> 
 
      <p>Proin hendrerit velit a lectus vel nibh tincidunt</p> 
 
      </div> 
 
      <!-- item --> 
 
     </div> 
 
     <!-- col-md-3 --> 
 

 
     <div class="col-md-3 col-sm-3"> 
 
      <div class="item"> 
 
      <a href="#"> 
 
       <img src="https://s16.postimg.org/5d0xpcc01/solar_panels.png" width="130" height="132" title="someText" alt="someText"> 
 
      </a> 
 
      <h4>90<span>&#37;</span></h4> 
 
      <p>Proin hendrerit velit a lectus vel nibh tincidunt</p> 
 
      </div> 
 
      <!-- item --> 
 
     </div> 
 
     <!-- col-md-3 --> 
 
     </div> 
 
     <!-- row --> 
 
    </div> 
 
    <!-- facts-content --> 
 
    </div> 
 
    <!-- container --> 
 
</section> 
 
<!-- facts -->

Answer 1

あなたが特定のピクセルアライメントを懸念している場合は、ことはありません。非常に多くの異なる画面サイズと解像度を持つモバイル環境では、正確なピクセル数をカウントすることは意味をなさない。あなたの出力は良く見え、PSDの精神を捉えます。物事を正確に100％上げようとしないでください。それは実質的に利益を追加する無駄な努力です。