中心のコンテンツを達成するためのネスティングマージン

Question

コンテンツを左に揃えて子供divを中心に置くことに問題があります。私はインラインである4つのボックスを持っている、ボックスは25％の幅に設定され、自然に左に揃えられています。私の問題は、4つのボックスがボックス内の自然な位置合わせのためにページの中央に配置されているように見えないことです。これは最初の画像で見ることができます。

だから、私は何を思ったことは私の.contact-connect-boxの中にあったがしかし、これは全く貢献していない、多少箱の内部のためのラップとして、子のdiv（connect-box-wrap）を作成し、margin: 0 auto;を追加しました。

2番目の画像を見ると、それは私の後です。私はコンテンツをまだ左に揃えたいが、ボックスの位置がページの中央に表示されるように、すべての余白をずらしてください。

#contact-connect { 
      width: 80%; 
      height: auto; 
      margin: 0 10%; 
      padding: 80px 0; 
     } 
     #contact-connect-box-container { 
     margin: 0 auto; 
     width: auto; 
     /*display: flex; 
     justify-content: space-around;*/ 

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

<div id="contact-connect"> 
     <div id="contact-connect-box-container"> 
      <div class="contact-connect-box"> 
       <div class="connect-box-wrap"> 
       <h2 class="contact-connect-title">Call</h2> 
       <div class="contact-connect-description">gfdgg</div> 
       </div> 
      </div><div class="contact-connect-box"> 
      <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><div class="contact-connect-box"> 
      <div class="contact-connect-box"> 
       <h2 class="contact-connect-title">Visit</h2> 
       <div class="contact-connect-description"> 
        gsdfg 
       </div> 
       </div> 
      </div><div class="contact-connect-box"> 
      <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> 
    </div> 

Answer 1

それは冗長と思われるので、あなたはすでに.content-接続箱を持っているので、私は.contentコネクト・ボックス・コンテナをスクラップします。私はこれをで行いました.content-connect-boxと次にの左揃え.connect-box-wrap。また、スペーシングをどのように選択するかについても注意してください。 ％で作業している場合は、それを固執してください.pxと％を混在させると、特定の画面サイズがレイアウトを壊してしまいます。どのようにすべての間隔を置いているかを見るために、コード内で異なるマージン％sで遊んでください。

<div id="contact-connect"> 

     <div class="contact-connect-box"> 
      <div class="connect-box-wrap"> 
      <h2 class="contact-connect-title">Call</h2> 
       <div class="contact-connect-description">gfdgg hgakhglkrjhg kjshfglkjshd flkjgshfd oweir werowheor weriwjeroija 
       </div> 
      </div> 
     </div> 

     <div class="contact-connect-box"> 
      <div class="connect-box-wrap"> 
      <h2 class="contact-connect-title">Call</h2> 
       <div class="contact-connect-description">gfdgg 
       </div> 
      </div> 
     </div> 


     <div class="contact-connect-box"> 
      <div class="connect-box-wrap"> 
      <h2 class="contact-connect-title">Call</h2> 
       <div class="contact-connect-description">gfdgg 
       </div> 
      </div> 
     </div> 


     <div class="contact-connect-box"> 
      <div class="connect-box-wrap"> 
      <h2 class="contact-connect-title">Call</h2> 
       <div class="contact-connect-description">gfdggaksj 
       </div> 
      </div> 
     </div> 

</div> 

<style type="text/css"> 

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


    .contact-connect-box { 
     width: 21%; 
     margin: 0 0 0 1%; 
     display: inline-block; 
     border: 2px solid black; 
     vertical-align: top; 
     text-align: center; 

    } 


    .connect-box-wrap { 
    margin: 10% auto; 
    width: 50%; 
    text-align: left; 

    } 



    </style>