Center a group of flex items and left-align them on wrap

Question

I am triying to center a group of flex items and then, left-align them on wrap.This means I can't use justify-content: center; or justify-content: space-between;

Image of the problem

As you can see in the image, the elements are not centered.

Here is my code:

HTML

<div class="container transp" style=" padding:2%">

    <div class="grid">
        <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

    </div>




</div>

CSS

body{
box-sizing: border-box;
margin: 0;
}
.grid{

background-color:red;
}

.container {
  margin: auto;
  max-width: 1200px;
}
.cell{
  margin:0.5rem;
}

cell a{
display:block;
}
cell a img{
display:block;
}

@media screen and (min-width: 600px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

  }
  .cell {
    width: 30%;
  }
}

@media screen and (min-width: 1000px) {
  .cell {
    width: calc(100% / 6);
  }
}
img{
width:100%;
}

Pay attention to the part of @media screen and (min-width: 600px) as is the part where I'm using a flex display.