How to evenly distribute elements in a div

HTML

<div id="container">

              <div class="social">
                <a href="#" target="_blank" aria-label="facebook-link">
                <img src="http://placehold.it/40x40">
                </a>
                <a href="#" target="_blank" aria-label="twitter-link">
                    <img src="http://placehold.it/40x40">
                </a>
                 
                
 
                <span class="stretch"></span>
              </div>
                 </div>

CSS

#container{width:100%; border:1px solid red; margin:0 auto;}
.social{width:90%; border:1px solid green; margin:0 auto;padding:30px 0;}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
.social{
  text-align: justify;
}
.social a {
    line-height: 1px;
    font-size: 40px;
    color: #007DBB;
    vertical-align: top;
    display: inline-block;
    zoom: 1;
    text-decoration: none;
}
}