title: Remove artificial margin after inline-block wrap
body: <p>I have a number of inline-block elements in a container which is centered. The container (light blue in the picture) is also inline-block, so it should contain its content <a href="https://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents">and be as small as possible.</a></p>
  
  <p>When these inline elements start to wrap, (because I'm making the page smaller), I want the container to continue to be as small as possible, so that the container and its content centers on my page. But the container makes room for the element that is not longer present. How can I solve this? <a href="https://i.stack.imgur.com/RxjR1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RxjR1.png" alt="artificial margin"></a>.</p>
  
  <p>This container is centered on the page:</p>
  
  <p><a href="https://i.stack.imgur.com/Uy1Yy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uy1Yy.png" alt="Centered"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,html{
   margin:0;
   width:100%;
   height:100%;
  }
  
  
  .card{
      background-color: red;
      border: 1px solid;
      width:100px;
      height:160px;
      display:inline-block;
      vertical-align:middle;
  }
  
  .card-container{
      background-color: lightblue;
      display: inline-block;
      position: relative;
      transform: translateX(-50%);
      left:50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card-container"&gt;
      &lt;div class="card"&gt;&lt;/div&gt; 
      &lt;div class="card"&gt;+&lt;/div&gt;
      &lt;div class="card"&gt;&lt;/div&gt; 
      &lt;div class="card"&gt;+&lt;/div&gt;
      &lt;div class="card"&gt;&lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>