Erstellen von Platz zwischen zwei Bildern

Question

Hallo Leute, ich versuche, meine Bilder in die Mitte des Bildschirms mit Flex-Box und fügen Sie dann einige Polsterung zwischen jedem. Doch aus irgendeinem Grund das erste Bild überlappt das zweite Bild und ich versuche, es zu klären:

Wie man hier sehen kann Ich habe es mit fa Symbolen zu arbeiten, die perfekt ist: 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 } 

aber jetzt will ich es bekommen mit aktuellen Bildern zu arbeiten, ich möchte das gleiche Layout, aber meine Bilder anstelle der Icons, aber wenn ich es tun, ist es vollständig überlappt, also einfach nur, wie kann ich es bekommen Polsterung sein zwischen jedem div, so kann ich Fotos anstelle von Symbolen einfügen

Dank

Answer 1

Überprüfen Sie diesen Code aus, habe ich Breite 100 % bis zum Anker-Tag. Sie hatten eine Breite von 16% und Ihr Bild war breiter als die Containerbreite und das war es überlappend.

.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>