Creating space between two images - html

Question

Hi guys i am trying to put my images in the middle of the screen using flex box and then adding some padding between each one. However for some reason the first image overlaps the second image and i am trying to sort it out:
As you can see here i got it to work with fa icons which is perfect: 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 }
However now i want it to get to work with actual pictures, i want the same layout but using my pictures instead of the icons, but when i do it, it overlaps completely , So just simply how can i get there to be padding between each div so i can insert photos instead of icons
Thanks

Answer 1

Check out this code, I added width 100% to the anchor tag.. you had a width of 16.some % and your image was wider than than the container width and thats you it was overlapping.
.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>