Flexbox: 2-й ряд не выровнен по 1-му ряду

Question

У меня есть 4 предмета в гибком контейнере. Я хочу 3 каждого ряда. Я хочу, чтобы контейнер был отцентрирован - центрируя контейнер с помощью justify-content, 4-й элемент во 2-м ряду также был отцентрирован. Поэтому я использовал трюк :: after, чтобы попытаться исправить его, но теперь вторая строка не выровнена с первой строкой.

Проблема, на мой взгляд, заключается в том, что гибкий контейнер занимает большую ширину, чем элементы содержимого, что вынуждает меня центрировать его по адресу justify-content, который вызывает эту проблему.

Может ли это быть проще при использовании сетки? если так как? Я хочу простую центрированную сетку видеороликов YouTube для iframe, по 3 на строку с последним выравниванием по левому краю.

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; не центрирует контейнер, он центрирует предметы внутри него.Если вы удалите это из своего CSS для ul, я вижу именно то, что, по вашему мнению, вы описываете.В качестве альтернативы вы можете использовать justify-content: space-between; или justify-content: space-evenly; для похожих результатов.

Если у вас есть проблемы с его переполнением по горизонтали (чего не должно быть), тогда вы можете установить max-width: 100%; на ul и это должно быть решено.Трюк с псевдоэлементом ::after не нужен.