Отзывчивый CSS, ограничивающий изображения до половины экрана, хочу отображать их по горизонтали

Мне удалось собрать достаточно html / css из источников в Интернете, чтобы я мог почти делать то, что хочу. Я пытаюсь отобразить n (в настоящее время 4) изображений с кнопками в центре рядом друг с другом по горизонтали в верхней части страницы. У меня есть четыре загружаемых изображения с кнопкой посередине. Я их окружил коробкой. Я заставляю их реагировать на размер браузера (в разумных пределах).

К сожалению, по непонятной мне причине изображения распространяются только на половину поля:

Вот что я считаю релевантным html:

<div id  = "buttonWrapper">


    <div class = "container" id = "position1">
      <img src = "images/originals/mountainclimber.jpg" alt = "Mountain Climber">
      <button class = "btn" id = "mountainHtmlButton">The Mountain Climber</button>
    </div>

    <div class = "container" id = "position2">
      <img src = "images/originals/fuchun.jpg" alt = "Fuchun">
      <button class = "btn" id = "fuchunHtmlButton">Dwelling in the Fuchun Mountains</button>
    </div>

    <div class = "container" id = "position3">
      <img src = "images/originals/palace.jpg" alt = "Palace">
      <button class = "btn" id = "palaceHtmlButton">Amailenborg Palace Square</button>
    </div>

    <div class = "container" id = "position3">
      <img src = "images/originals/udnie.jpg" alt = "Udnie">
      <button class = "btn" id = "udnieHtmlButton">Udnie</button>
    </div>

</div>

И соответствующий соответствующий CSS:

/* Container needed to position the button. Adjust the width as needed */
.container {
  position: relative;
  width: 25%;
}

/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.container .btn:hover {
  background-color: black;
}

/*
**********
Section for button alignment/positioning stuff
**********
*/

#buttonWrapper {
    background-color: black;
    border-radius: 10px;
}

#position1 {
    float: left;
    /*width: 25%; */
    overflow: hidden;
}

#position2 {
    overflow:hidden;
}

#position3 {
    overflow:hidden;
}

#position4 {
    overflow:hidden;
}

Единственные 50% ссылок, которые я вижу, похоже, связаны с размещением кнопки. Но я четко не до конца понимаю, что здесь происходит. Опять же, мой идеальный результат здесь состоит в том, что 4 изображения отображаются бок о бок по горизонтали на всем протяжении черного фона (при условии, что размер окна разумный). Я знаю, что это все равно будет выглядеть немного странно из-за разных соотношений сторон изображений.

Спасибо за любую помощь