Flexbox: 2nd row not aligned to 1st row - html

Question

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
.section-vids ul {
list-style: none;
margin:0;
padding:0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.section-vids ul li {
padding: 20px;
}
.section-vids ul:after {
content: "";
flex: auto;
}
<div class="container" id="media">
<section class="section-vids">
<ul>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
</ul>
</section>
</div>

Answer 1

justify-content: center; does not center the container, it centers the items inside of it. If you remove that from your CSS for the ul, I'm seeing exactly what I believe you are describing. You could alternatively use justify-content: space-between; or justify-content: space-evenly; for similar results.
If you're having issues with it overflowing horizontally (which you shouldn't be) then you can set max-width: 100%; on the ul and that should be resolved. The trick with the ::after pseudo element is unneeded.