Изображения переполняют .container-wrapper, несмотря на переполнение: скрыто; не работает

Я работаю над пользовательским разделом для веб-сайта, где у меня есть элемент .container-wrapper, содержащий текст и несколько изображений. Контейнер должен иметь переполнение: скрыто; чтобы предотвратить проблемы с переполнением. Однако изображения внутри .images-wrapper по-прежнему выходят за пределы контейнера.

Вот упрощенная версия моей структуры HTML и CSS:

<section class = "custom-section">
  <div class = "container-wrapper">
    <!-- Text and other content -->
    
    <div class = "images-wrapper">
      <img src = "image1.jpg" alt = "Image 1">
      <img src = "image2.jpg" alt = "Image 2">
      <img src = "image3.jpg" alt = "Image 3">
    </div>
  </div>
</section>

.custom-section {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 650px; /* Adjust as needed */
}

.custom-section .container-wrapper {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  overflow: hidden; /* Should hide overflow */
}

.custom-section .images-wrapper {
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  position: absolute;
  left: 0; /* Adjust as needed */
  display: flex;
  gap: 30px;
}

.custom-section .images-wrapper img {
  width: 300px; /* Adjust as needed */
  height: 430px; /* Adjust as needed */
}

Несмотря на то, что overflow: hidden; включено .container-wrapper, последнее изображение в .images-wrapper по-прежнему заметно выходит за пределы. Я проверил ширину и расположение, кажется, все правильно.

Что может быть причиной этой проблемы? Как я могу гарантировать, что overflow: hidden; эффективно скрывает переполненные изображения внутри .container-wrapper?

Вот как это выглядит сейчас:

Вот так это выглядит сейчас