css fixed width elements, centered & wrapped rows

I would like container to have a max-width of 800px I would like there to be no spaces & each box be 250px & centered & wrapped (justify left)

    |-  centered -|
--->[box][box][box]<---
--->[box][box]     <---

or

      |-center-|
----->[box][box]<-----
----->[box][box]<-----
----->[box]     <-----

or

-------->[box]<--------
-------->[box]<--------
-------->[box]<--------
-------->[box]<--------
-------->[box]<--------

so far i have

#container {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    align-content: flex-start;
    justify-content: center;
}
#container > .box {
    position: relative;
    width: var(--tutorial_element_w);
    height: var(--tutorial_element_h);
    border: red solid thick;
}

which centers the leftover boxes on the last row.

please help! thank you!