title: How to justify content with space-between AND have everything centered?
body: <p>I'm running into a problem with flexbox.</p>
  <p>I have a div that has a max-width of 920px.  I want the boxes of content to fill up the div from left to right to the max possible width, with everything having equal margins.  When the screen-size goes down to one box per row, I want that box to be centered on the screen.</p>
  <p>Here is the site in action: <a href="http://javinladish.com/code/index.html" rel="noreferrer">http://javinladish.com/code/index.html</a></p>
  <p>If I use:</p>
  <pre><code>justify-content: center;
  </code></pre>
  <p>Then the boxes don't fill up the max width.</p>
  <p>If I use:</p>
  <pre><code>justify-content: space-between;
  </code></pre>
  <p>Then the boxes don't stay centered when I go down to one box per row.</p>
  <p>How can I achieve a happy balance between the two?  I.e filling up the max width of the container, and keeping all content centered?</p>