I have a question about Flex Box row's and the lining up of items

Hi there! Big thanks in advance to whoever can give me some advice on this!

I have a flexbox layout that I am using to make a responsive page. There are a set of blog posts on an index page - in the real world I wont know how many posts there will be so I have mocked up a layout that uses a certain number of posts (10) as an example.

This is the html:

<div id="box-container">
        <div class="box-item"><p>Hello Test Box 1</p></div>
        <div class="box-item"><p>Hello Test Box 2</p></div>
        <div class="box-item"><p>Hello Test Box 3</p></div>
        <div class="box-item"><p>Hello Test Box 4</p></div>
        <div class="box-item"><p>Hello Test Box 5</p></div>
        <div class="box-item"><p>Hello Test Box 6</p></div>
        <div class="box-item"><p>Hello Test Box 7</p></div>
        <div class="box-item"><p>Hello Test Box 8</p></div>
        <div class="box-item"><p>Hello Test Box 9</p></div>
        <div class="box-item"><p>Hello Test Box 10</p></div>
</div>

And some CSS:

#box-container {

    @include flexbox; /* my sass mixin for flexbox display: flex*/
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    width: 90vw;
    margin: 0 auto;
    padding: 1% 5%;
}

.box-item {
    height: 200px;
    background-color: $header-green;

    flex-basis: 1;
    flex-shrink: 0;
    margin-bottom: 20px;

        @include breakpoint(phabletMax) { /* this breakpoint creates 2 col*/
            width: calc(50% - 20px);
        }

        @include breakpoint(tablet) {/* this breakpoint creates 3 col */
            width: calc(33.33% - 20px);
        }

        @include breakpoint(laptopUp) { /* this breakpoint creates 4 col */
            width: calc(25% - 20px);
        }
    }

Now my question is, the first 2 breakpoints work perfectly, regardless of how many post box-item's there are, BUT when I get the 3rd breakpoint active (which should be 4 columns) it breaks and the last 2 items instead of flowing from Left to right on the last line, end up as 9 on the far left and 10 on the far right.

Nothing I do seems to fix this and I cannot find any information on why this is happening. Any guidance would be so greatly received!!

I've got a screen shot of this but I don't know how to add that into this question!

Massive thanks again!

Best wishes

AL