グループ化されたインライン要素のセンタリング

Question

ページの中央に表示されているように見たいセクションがあります。私はinlineと表示される4つのボックスを持っていると私はそれらが中心にあるのが好きではない理由は、すべてが自然に左に揃えられていると考えています。物事は、私はこれらのボックスにあるコンテンツを中心にすることを望んでいない、私はそれらを左に整列したい。

どうすればボックスをページ内の中央に配置しても、テキストに影響を与えないように見せることができますか？

#contact-connect { 
 
    width: 80%; 
 
    height: auto; 
 
    margin: 0 10%; 
 
    padding: 80px 0; 
 
} 
 

 
#contact-connect-box-container { 
 
    margin: 0 auto; 
 
    width: auto; 
 
} 
 

 
.contact-connect-box { 
 
    width: 25%; 
 
    margin: 60px 0 0 0; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    vertical-align: top; 
 
    transition:1s; -webkit-transition:1s; 
 
}

<div id="contact-connect"> 
 
    <div id="contact-connect-box-container"> 
 
     <div class="contact-connect-box"> 
 
      <h2 class="contact-connect-title">Call</h2> 
 
      <div class="contact-connect-description">vcxv</div> 
 
     </div> 
 
     <div class="contact-connect-box"> 
 
      <h2 class="contact-connect-title">Write</h2> 
 
      <div class="contact-connect-description"> 
 
       Reach out to us 
 
       <br> 
 
       <div id="scroll" class="contact-connect-link">Fill out our contact form.</div> 
 
      </div> 
 
     </div> 
 
     <div class="contact-connect-box"> 
 
      <h2 class="contact-connect-title">Visit</h2> 
 
      <div class="contact-connect-description"> 
 
       fgrge 
 
      </div> 
 
     </div> 
 
     <div class="contact-connect-box"> 
 
      <h2 class="contact-connect-title">Connect</h2> 
 
      <div class="contact-connect-description"> 
 
       <div class="contact-connect-link"><a href="http://facebook.com" target="_blank">Visit us on Facebook</a></div> 
 
       <div class="contact-connect-link"><a href="http://youtube.com" target="_blank">See us on Youtube</a></div> 
 
       <div class="contact-connect-link"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

あなただけの "表示：フレックス" を追加することができDEMOあなたの＃接触コネクト・ボックス・コンテナ

#contact-connect-box-container { 
    margin: 0 auto; 
    width: auto; 
    display: flex; 
} 

上を： https://jsfiddle.net/w776Lq1u/8/

Answer 2

問題があります「接続」の右側のマージン。 flexboxを使用し、display: flex; justify-content: space-around;を使用することをお勧めします。そうすれば、余白が全く必要ないでしょう。

EDIT：あなたは接続ボックスを削除する場合plnkr