title: CSS. Center inline-block. Don't center content
body: <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>.wrap{
    width:800px;
    background: beige;
    padding:20px
  }
  
  .contactForm__headerWrap{
    border:1px solid darkkhaki;
    width:100%;
    padding:5px;
    text-align:center;
  }
  
  .contactForm__headerContainer{
    display:inline-block;
    border:1px solid red;
    padding:5px;
    margin:0 auto;
  }
  
  .contactForm__headerContainer_header{
    text-align:left;
    text-transform:uppercase;
  }
  
  .contactForm__headerContainer_header-big{
    border:1px solid darkorchid;
    font-size:20px
  }
  
  .contactForm__headerContainer_header-small{
    border:1px solid darkorange;
    font-size:14px;
    text-aling: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
    &lt;div class="contactForm__headerWrap"&gt;
      &lt;div class="contactForm__headerContainer"&gt;
          &lt;div class="contactForm__headerContainer_header contactForm__headerContainer_header-big"&gt;big header&lt;/div&gt;
          &lt;div class="ccontactForm__headerContainer_header contactForm__headerContainer_header-small"&gt;small header&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I center an inline-block div, without using text-align?</p>
  
  <p>Ok, i added code snippet and show the problem. My small header centered left now and i want to aligin it to left of inline-block. I don't want  set static width of  <code>contactForm__headerContainer</code>. 
  That's possible?</p>
  
  <p><a href="https://i.stack.imgur.com/isn0p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/isn0p.png" alt="Scheme"></a></p>