CSS flex-start items doesn't get centered

So i have this flex container with justify-content: flex-start and i want to center the items inside it.

EDIT:for comparison i want it to be like youtube homepage video recommendations.

Here is my code i don't understand why it's not working: (it looks like centered but it's not there is a width left out from child container, please use dev tools and hover over the child container you'll see it)

.parent {
  width: 100%;
  margin: 0 auto;
  max-width:500px
}

.child {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.item {
  background-color: #4d4d4d;
  margin: 5px 5px;
  width: 125px;
  height: 100px;
}

<div class="parent">
  <div class="child">
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div><div class="item">
      item
    </div><div class="item">
  item
</div><div class="item">
  item
</div><div class="item">
      item
    </div><div class="item">
      item
    </div>
  </div>
</div>

here is what i want:(i know it's not centered but the point is i want flex-start with margin 0 auto, hope it makes sense)

.parent {
  width: "100%";
  margin-left: 15%;
  max-width:500px
}

.child {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.item {
  background-color: #4d4d4d;
  margin: 5px 5px;
  width: 100px;
  height: 100px;
}

<div class="parent">
  <div class="child">
    <div class="item">
      item
    </div><div class="item">
  item
</div><div class="item">
      item
    </div><div class="item">
  item
</div><div class="item">
  item
</div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div><div class="item">
      item
    </div><div class="item">
      item
    </div><div class="item">
      item
    </div>
  </div>
</div>

Thanks for answering

from Recent Questions - Stack Overflow https://ift.tt/2SqbeTE
https://ift.tt/eA8V8J