Flexbox: 2nd row not aligned to 1st row

_x000D_ _x000D_ I have 4 items in a flex container. I want 3 each row. I want the container centered-- by centering the container with justify-content the 4th item in the 2nd row was also centered. So I used a ::after trick to try to correct it, but now the 2nd row is not aligned with the 1st row. The problem, as I see it, is that the flex container is taking more width than the content items forcing me to center it with justify-content which is causing this issue. Could this be easier using grid? if so how? I want a simple centered grid of iframe youtube videos, 3 per row with the last row aligned left. https://codepen.io/k4ir0s/pen/RdeejK _x000D_ _x000D_ .section-vids ul {_x000D_ list-style: none;_x000D_ margin:0;_x000D_ padding:0;_x000D_ display: flex;_x000D_ flex-wrap: wrap;_x000D_ justify-content: center;_x000D_ }_x000D_ _x000D_ .section-vids ul li {_x000D_ padding: 20px;_x000D_ }_x000D_ _x000D_ .section-vids ul:after {_x000D_ content: "";_x000D_ flex: auto;_x000D_ }_x000D_ _x000D_ _x000D_