2つの画像の間にスペースを作成する

Question

こんにちはみんな、フレックスボックスを使って画面の中央に画像を置いて、各画像の間にパディングを追加しようとしています。しかし、何らかの理由で最初の画像は、第2の画像に重なり、私はそれを整理しようとしています：

あなたがここに見ることができるように私はそれが完璧であるFAアイコンで動作するようになった：Link here

HTML：

<div class="row"> 
     <div class="col-md-12"> 
      <div class="sidebar-social"> 
       <ul> 
        <li> 
        <a id="header1" rel="nofollow" target="_blank" title="Facebook"><img src="Images/phone1.png"> 
        <span id="header1span">Reklambyrå</span> 
        </a>  
        </li> 
        <li> 
         <a id="header1" rel="nofollow" target="_blank" title="Facebook"><img src="Images/phone.png"> 
         <span id="header1span">Reklambyrå</span> 
         </a>  
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

CSS：

.services .get_in { 
    margin: 0; 
} 

.sidebar-social { 
    margin: 0; 
    padding: 0; 
} 

.sidebar-social ul { 
    margin: 0; 
    padding: 5px; 
     display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.sidebar-social li { 
     text-align: center; 
    width: 15.9%; 
    margin-bottom: 3px!important; 
    background-color: #fff; 
    display: inline-block; 
    font-size: 10px; 
    padding:0; 
     display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
} 

.sidebar-social i { 
    display: block; 
    margin: 0 auto 10px auto; 
    width: 32px; 
    height: 32px; 
    margin: 10px auto 0; 
    line-height: 32px; 
    text-align: center; 
    font-size: 20px; 
    color: #383533; 
    margin-top:0; 
    padding-top:5px; 
} 
.sidebar-social a{ 
    text-decoration:none; 
    width:100%; 
    height:100%; 
    display:block; 
    margin:0; 
    padding:0; 
} 

.sidebar-social a span{ 
    color:black; 
    font-size:10px; 
    padding:5px 0 10px 0; 
    display:block; 
    text-transform:uppercase; 
    font-family:'Josefin Sans'; 
    letter-spacing:1px; 
} 

.sidebar-social a:hover i.fa-paint-brush { color: #FFC600; } 
.sidebar-social a:hover i.fa-phone { color:#FFC600 } 

は、しかし、今私はそれが実際の写真で動作するように取得したい、私は同じレイアウトをしたいではなく、アイコンの私の写真を使用して、私はそれを行うとき、それは完全に重なっている、だから単に、私はそれぞれの間のパディングがあるように取得することができますどのように私は写真を挿入することができます代わりのアイコン

おかげ

Answer 1

は、このコードをチェックアウトDIVしかし、私は100を幅追加しましたアンカータグに％。あなたは16.some％の幅を持ち、画像はコンテナの幅よりも広く、重なっていました。

.services .get_in { 
 
    margin: 0; 
 
} 
 

 
.sidebar-social { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.sidebar-social ul { 
 
    margin: 0; 
 
    padding: 5px; 
 
     display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.sidebar-social li { 
 
     text-align: center; 
 
    width: 100%; 
 
    margin-bottom: 3px!important; 
 
    background-color: #fff; 
 
    display: inline-block; 
 
    font-size: 10px; 
 
    padding:0; 
 
     display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    cursor: pointer; 
 
    //background-image: url('//www.fillmurray.com/500/1200'); 
 
} 
 

 
.sidebar-social i { 
 
    display: block; 
 
    margin: 0 auto 10px auto; 
 
    width: 32px; 
 
    height: 32px; 
 
    margin: 10px auto 0; 
 
    line-height: 32px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    color: #383533; 
 
    margin-top:0; 
 
    padding-top:5px; 
 
} 
 
.sidebar-social a{ 
 
    text-decoration:none; 
 
    width:100%; 
 
    height:100%; 
 
    display:block; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.sidebar-social a span{ 
 
    color:black; 
 
    font-size:10px; 
 
    padding:5px 0 10px 0; 
 
    display:block; 
 
    text-transform:uppercase; 
 
    font-family:'Josefin Sans'; 
 
    letter-spacing:1px; 
 
} 
 

 
.sidebar-social a:hover i.fa-paint-brush { color: #FFC600; } 
 
.sidebar-social a:hover i.fa-phone { color:#FFC600 }

<div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="sidebar-social"> 
 
       <ul> 
 
        <li> 
 
        <a id="header1" rel="nofollow" target="_blank" title="Facebook"><img src="//www.fillmurray.com/200/300"> 
 
        <span id="header1span">Reklambyrå</span> 
 
        </a>  
 
        </li> 
 
        <li> 
 
         <a id="header1" rel="nofollow" target="_blank" title="Facebook"><img src="//www.fillmurray.com/200/300"> 
 
         <span id="header1span">Reklambyrå</span> 
 
         </a>  
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div>