title: How can I put two divs shaped as circles next to each other?
body: <p>Basically, I am trying to put two circles next to each other (instead of on top)inside of a container.</p>
  
  <p>However, there's a space between them and I want to get rid of it.  How can I put two (or more) circles together?</p>
  
  <p><a href="https://jsfiddle.net/hLsu9qj0/" rel="nofollow">https://jsfiddle.net/hLsu9qj0/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="circle"&gt;
      circle 1
    &lt;/div&gt;
    &lt;div class="circle"&gt;
      circle 2
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.container {
      position: relative;
      margin: 0 auto;
      line-height: 50px;
      height: 50px;
  
  }
  
  .container .circle {
          height: 50px;
          width: 50px;
          background-color: blue;
          border-radius: 50%;
          text-align: center;
          margin: 0 auto;
          display: inline;
      }
  </code></pre>
  
  <p><strong>thanks everyone for your help!!!</strong></p>