title: Why justify-content doesn't work in my case?
body: <p>Can't find an answer why <code>.user-name-box</code> &amp; <code>.user-location</code> divs don't wanna stay on center of parent div...</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>.main-content{
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
          width: 600px;
          background: grey;
      }
          .user-info{
              display: inline-flex;
              flex-flow: column nowrap;
              justify-content: center;
              align-content: center;
              width: 300px;
              background: red;
          }
              .user-name-box{
                  display: flex;
                  width: 100px;
                  height: 100px;
                  background: blue;
                  color: white;
              }
              .user-location{
                  display: flex;
                  width: 100px;
                  height: 100px;
                  background: yellow;
                  color: black;
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="main-content"&gt;
  
          &lt;div class="user-info"&gt;
  
              &lt;div class="user-name-box"&gt;user-name-box&lt;/div&gt;
              &lt;div class="user-location"&gt;user-location&lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance!</p>