title: How to center multiple inline-block elements with CSS?
body: <p>I want to horizontally center two (or possibly more) inline-block elements inside a container block element. It should look like this:</p>
  
  <pre><code>--------------------------
  |      _____   _____      |
  |     |     | |     |     |
  |     | foo | | bar |     |
  |     |_____| |_____|     |
  |_________________________|
  </code></pre>
  
  <p>However, with my broken code, it is currently looking like this:</p>
  
  <pre><code>--------------------------
  | _____   ____            |
  ||     | |     |          |
  || foo | | bar |          |
  ||_____| |_____|          |
  |_________________________|
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
   &lt;a&gt;foo&lt;/a&gt;
   &lt;a&gt;bar&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div a {
   display: inline-block;
   padding: 1em;
   margin: 1em;
   border: 1px solid black;
  }
  </code></pre>
  
  <p>The reason why the two anchors have to be inline-block and not just plain inline is because I don't want the anchor's padding and margin to overlap.</p>