title: HTML Flex divs leaving empty space on the right
body: <p>I am having an issue where I am trying to use flex to show divs left, center, and right. Although I run into an issue where the center column isn't in-line with the div above it. When I change the flex to <code>flex: 1</code>, it does put each column in line but leaves an empty space to the right of my furthest right div. Can someone offer some advice or tips on how to correct this? I have seen similar questions about flex, but nothing the specifically addressed this concern. I have provided some of the code I am using currently. Thank you in advance!</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>.container {
      display: flex;
      width: 100%;
      justify-content: space-between;
  }
  .item {
      flex: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="item"&gt;Hello World&lt;/div&gt;
          &lt;div class="item"&gt;It is me&lt;/div&gt;
          &lt;div class="item"&gt;BYE&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="item"&gt;Hello World, again!&lt;/div&gt;
          &lt;div class="item"&gt;It is me, again?&lt;/div&gt;
          &lt;div class="item"&gt;BYE&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>