title: Formatting divs inside div container
body: <p>I made a simple example to test this out. I have one wrapper <code>div</code> with two other <code>div</code> elements inside it set to <code>display: inline-block;</code>. The two inner <code>div</code> elements fall on the same line, but how do I get them centered on the half of the main <code>div</code> they belong to?  For example, the blue box in the middle of the left side of the main <code>div</code> and the red box in the middle of the right side of the main <code>div</code>.  Code and screenshot below.</p>
  
  <p><a href="https://i.stack.imgur.com/a2RGt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a2RGt.png" /></a></p>
  
  <p>Also, the inspector shows a width of 204px for the <code>main-box</code> <code>div</code> and even when I set <code>padding</code> and <code>margin</code> to 0 there's still a gap on the bottom between the blue/red boxes and the border of the <code>main-box</code>.  How do I get rid of the gap?</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>.box-test {
    height: 200px;
    display: inline-block;
    width: 30%;
    box-sizing: border-box;
  }
  
  #blue {
    background-color: blue;
  }
  
  #red {
    background-color: red;
  }
  
  #main-box {
    text-align: center;
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main-box"&gt;
    &lt;div id="blue" class="box-test"&gt;&lt;/div&gt;
    &lt;div id="red" class="box-test"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>