title: How to equally distribute elements horizontally using CSS
body: <p>I have eleven dots arrange horizontally using CSS. How can I evenly/equally distribute spacing between elements (mine are <code>&lt;span&gt;</code> elements) based on the width of the browser window?</p>
  
  <p>Here's my sample code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>span.circle {
    height: 20px;
    width: 20px;
    border-radius: 100%;
    border: 1px solid #eee;
    background:#ddd;
    position: absolute;
    left:0;
    top: 45px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
  }
  #second{
    left: 190px;
  }
  #third{
    left: 380px;
  }
  #fourth{
    left: 570px;
  }
  #five{
    left: 760px;
  }
  #six{
    left: 950px;
  }
  #seven{
    left: 1140px;
  }
  #eight{
    left: 1330px;
  }
  #nine{
    left: 1520px;
  }
  #ten{
    left: 1710px;
  }
  #eleven{
    left: 1900px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id="first" class="border-change circle"&gt;&lt;/span&gt;
  &lt;span id="second" class="circle"&gt;&lt;/span&gt;
  &lt;span id="third" class="circle"&gt;&lt;/span&gt;
  &lt;span id="fourth" class="circle"&gt;&lt;/span&gt;
  &lt;span id="five" class="circle"&gt;&lt;/span&gt;
  &lt;span id="six" class="circle"&gt;&lt;/span&gt;
  &lt;span id="seven" class="circle"&gt;&lt;/span&gt;
  &lt;span id="eight" class="circle"&gt;&lt;/span&gt;
  &lt;span id="nine" class="circle"&gt;&lt;/span&gt;
  &lt;span id="ten" class="circle"&gt;&lt;/span&gt;
  &lt;span id="eleven" class="circle"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>