Why is the div in a flexbox second row floating to the right

Question

I am trying to create a 3 column flexbox layout, with this css code:

.block  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.itemPads {
  flex: 0 1 auto;
  width: 32%;
  border: 1px solid #009900;
  margin-top: 6px;
}

and this html:

<div class="block" >
     <div class="itemPads">
        <p>Column 1</p>
     </div> 
     <div class="itemPads">
        <p>Column 2</p>
     </div> 
     <div class="itemPads">
        <p>Column 3</p>
     </div> 
     <div class="itemPads">
        <p>Column 4</p>
     </div> 
     <div class="itemPads">
        <p>Column 5</p>
     </div> 

</div>

I don't understand why block 5 floats to the right, like this:

How do I get the 5th block to be in the center?

Thanks

Martin