Контент Justify, похоже, не влияет на моих детей flexbox. Это из-за моих свойств высоты / ширины для одного из моих элементов?

Question

То, что я настроил, - это flexbox, который содержит 3 дочерних элемента: предыдущая кнопка, div, содержащий слайд-шоу, и следующая кнопка. У меня есть flexbox, установленный на justify-content: center, но стрелки придерживаются дальней стороны flexbox, а не рядом с ползунком div с обеих сторон. Между каждой стрелкой и слайдом есть промежуток, который не исчезнет go, если я не сделаю окно браузера более узким, чтобы во флексбоксе не было дополнительного места. Установка justify-content в центр должна сохранять их все вместе.

У меня та же проблема с контейнером слайдов. Это также flexbox и содержит 3 дочерних элементов: заголовок, изображение и цифры внизу. Когда я сжимаю окно, слайд-изображение уменьшается до нужного размера, но заголовок и цифры остаются прилипшими к верхней и нижней части flexbox, а не сгруппированы в середине с изображением.

Я бы хотел, чтобы будьте динамичны c, поэтому мне не придется настраивать CSS с помощью медиа-запросов для ряда различных точек разрыва.

То, что я пробовал:

• установка полей 0px для всех дочерних элементов
• установка отступа 0px для всех дочерних элементов
• размещение кнопок внутри контейнера слайд-шоу вместо текущего родителя и настройка контейнера слайд-шоу на flex
• все остальные опции для justify-content (центр, flex-start, flex-end и т. Д. c); казалось, что ни один из них не оказал никакого влияния на дочерние элементы
• , удалив атрибут width из моего контейнера для слайд-шоу и установив его в автоматический режим (из-за этого слайды исчезли), удалив атрибут height из моего контейнера для слайдов (это действительно исправило проблема, но это также привело к расширению слайда за пределы его контейнера)

Я также использую некоторые javascript, которые, вероятно, не должны быть включены, но он устанавливает каждый новый слайд отображать, чтобы заблокировать, и показ каждого предыдущего слайда - нет. Чтобы это слайд-шоу работало, у меня сложилось впечатление, что слайды должны установить абсолютное значение их позиции, а их родительский контейнер - относительный.

Вот скрипка с точным кодом, который я использую. Сначала я попытался упростить его, чтобы задать этот вопрос, удалив container1 и описание слева, но потом я не смог воспроизвести проблему, с которой столкнулся. Мне интересно, связано ли это с атрибутами высоты или ширины одного из элементов.

https://jsfiddle.net/kj7wzr5a/

.container1 {
  width: 85%;
  height: 650px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  text-align: center;
}

.left {
  width: 45%;
  text-align: center;
  margin-left: 30px;
  margin-right: 20px;
}

.descrip1 {
  margin-top: 20px;
}

.right {
  height: 100%;
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
}


.slideshow-container {
  height: 100%;
  width: 360px;
  margin-top: 25px;
  position: relative;
}

.slide {
  height: 90%;
  width: 100%;
  display: none;
  position: absolute;
}

.slide:first-child {display: block}

.slide {
   -webkit-transition: 0.5s ease;
   transition: 0.5s ease;
}

.slide img {
  height: 100%;
  width: 100%;
  margin: 0px;
  object-fit: contain;
}

/* Next & previous buttons */

.buttons {
  height: auto;
}

<div class="container1 bodytext">
      <div class="left">
        <div class="descrip1">
          <p>Blah blah text</p>
        </div>
      </div>
      <div class="right">
        <div class="buttons">
            <a class="slider_nav prev">&#60;</a>
        </div>
        <div class="slideshow-container">
          <div class="slide">
            <div class="flex">
              <div class="text">New Character</div>
              <img src="1.png" style="width:100%">
              <div class="numbertext">1 / 10</div>
            </div>
          </div>
          <div class="slide">
            <div class="flex">
              <div class="text">New Character Stats</div>
              <img src="2.png" style="width:100%">
            </div>
          </div>
        </div>
        <div class="buttons">
          <a class="slider_nav next">&#62;</a>
        </div>
      </div>
    </div>

Я довольно плохо знаком с программированием и не проходил никакого формального обучения.