How to add space between elements so they fill their container div?
<p>I want to add space between <em>spans</em> so that the leftmost and rightmost spans will be close to the edges of the <em>inner div</em>. I've tried to add the following rule, but it had no effect.</p>

<pre class="lang-css prettyprint-override"><code>span.icon-square {
    margin: 0 auto;
}

span.icon-square:first-child {
    margin-left: 0;
}

span.icon-square:last-child {
    margin-right: 0;
}
</code></pre>

<p>The illustration of what I'm trying to achieve is given below:</p>

<p><a href="https://i.stack.imgur.com/ETtyQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ETtyQ.png" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/mI22i.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mI22i.png" alt="enter image description here"></a></p>

<p>So, what am I missing?</p>