将一组弹性项目居中并在包装上将它们左对齐

Question

我试图将一组flex项居中，然后将它们在包装上左对齐。这意味着我不能使用 justify-content：center; 或 justify-content ：间隔；

Image of the problem

如您在图像中所见，元素未居中。

这是我的代码：

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%;
}

请注意@media屏幕的一部分和（最小宽度：600像素），这是我使用柔性显示器的部分。