How to center blocks on page while left aligning any trailing using css flexbox

Question

Web page with a list of products for sale. Each product is in a div with title, image, and price. I'm trying to get all of the product blocks centered on the page, but within the container have the products left aligned. The code below displays the list left justified with white-space on the right. I'd like to get rid of the white-space. I can center all the blocks on the page, but I don't like how products at the bottom of the page are centered, especially when there are only one or two items. Each box is a fixed width and height.

How do you get the container to not take up the entire width of the page element? I think if I could get the container to take up only the width of the elements within it then the container would center in the page.

#page {
  border: 2px solid #01f;
  margin: 1em;
}

#container {
  border: 2px solid #f00;
  display: flex;
  flex-wrap: wrap;
  margin: 1em;
}

.box {
  border: 2px solid #000;
  height: 350px;
  width: 350px;
  margin: 1em;
}

<div id="page">
  <div id="container">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="box4" class="box"></div>
    <div id="box5" class="box"></div>
    <div id="box6" class="box"></div>
    <div id="box7" class="box"></div>
    <div id="box8" class="box"></div>
    <div id="box9" class="box"></div>
    <div id="box10" class="box"></div>
  </div>
</div>