title: Inline-flex centering and gap issue
body: <p>I want to center two divs with <code>display: inline-flex;</code> inside a block container, but somehow <code>align-items: center;</code> and <code>justify-content: center;</code> doesn't work. Only text-align: center; works, but it shouldn't be like that (because I've read that with display: inline-flex; it should be align-items and justify-content) I guess? If my solution is correct, then can you tell me what's the difference?</p>
  
  <p>Also, I want to get rid of that little gap between these two centered divs, but I've tried some solutions from the internet and none of them works. Why?</p>
  
  <p>I'd be glad if you guys could help me out with both of my questions. </p>
  
  <p>Here's the code example:</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>.parent {
    border: 1px solid blue;
    background-color: yellow;
    padding: 10px;
  }
  
  .container {
    border: 1px dotted green;
    padding: 10px;
    text-align: center;
  }
  
  .child, .child2 {
    display: inline-flex;
    border: 1px solid red;
    background-color: honeydew;
    padding: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;div class="container"&gt;
      &lt;div class="child"&gt;
        &lt;h1&gt; Test1.&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="child2"&gt;
        &lt;h1&gt; Test2.&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>