Проблема с макетом Flexbox: элементы не отображаются правильно в строках

Я работаю над макетом, используя HTML и CSS с Flexbox. Моя цель — отобразить по 4 элемента в каждой строке. Однако мой текущий код отображает только 3 элемента в строке. Буду признателен за любые рекомендации по решению этой проблемы.

Несмотря на то, что ширина .element установлена ​​на 25%, что должно позволять размещать по 4 элемента в строке, элементы отображаются по 3 в строке. Почему элементы не отображаются по 4 в строке, как ожидалось? Как я могу настроить свой CSS, чтобы обеспечить 4 элемента в строке?

Заранее благодарим вас за вашу помощь!

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 4px solid gray;
}

.element {
  width: 25%;
  height: 300px;
  padding: 8px;
  box-sizing: border-box;
  background-color: silver;
}

<div class = "container">
  <div class = "element"></div>
  <div class = "element"></div>
  <div class = "element"></div>
  <div class = "element"></div>
  <div class = "element"></div>
  <div class = "element"></div>
</div>