Относительное позиционирование + адаптивность

Question

Как можно убрать смещение блока, который позиционирован относительно другого блока примерно по центру?
С уменьшением экрана он двигается влево, я уже день пробую разные способы, ничего не нашел пока что. Фото и код прилагаются. На обычных экранах фото в одно строку и белый блок с текстом по середине находится. Правда не могу допереть, из-за чего он так катается с уменьшением экрана

.team__inner {
  display: flex;
  flex-wrap: wrap;
}

.team__item {
  width: 25%;
  text-align: center;
  padding: 0 15px;
  margin-bottom: 60px;
  position: relative;
}

.team__name {
  font-size: 19px;
  font-weight: 500;
  text-transform: uppercase;
  color: #11749e;
  margin-bottom: 14px;
}

.team__prof {
  font-size: 14px;
  font-weight: 500;
}

.team__photo {
  display: block;
  max-width: 100%;
  height: auto;
}

.team__info {
  position: absolute;
  background: red;
  padding: 1.6em 2.6em 2em 2.6em;
  left: 13%;
  bottom: -12%;
}

<section class="team area">
  <div class="container">
    <div class="area__title">
      <h2 class="suptitle__area">Our team</h2>
      <p class="letter">t</p>
    </div>
    <p class="subtitle__area">Sales long tail influencer pitch release niche market.</p>

    <div class="team__inner">
      <div class="team__item">
        <img class="team__photo" src="img/team/team1.jpg" alt="">
        <div class="team__info">
          <div class="team__name">John Snow</div>
          <div class="team__prof">CEO</div>
        </div>
      </div>
      <div class="team__item">
        <div class="test"><img class="team__photo" src="img/team/team2.jpg" alt=""></div>
        <div class="team__info">
          <div class="team__name">Lady Sansa</div>
          <div class="team__prof">WebDesigner</div>
        </div>
      </div>
      <div class="team__item">
        <img class="team__photo" src="img/team/team3.jpg" alt="">
        <div class="team__info">
          <div class="team__name">Dadiv Smith</div>
          <div class="team__prof">Photographer</div>
        </div>
      </div>
      <div class="team__item">
        <img class="team__photo" src="img/team/team4.jpg" alt="">
        <div class="team__info">
          <div class="team__name">Lady Sansa</div>
          <div class="team__prof">Photographer</div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

left: 13% даст вам позицию блока относительно размера родителя.
Если родитель имеет 100px, а сам блок 50px, то отступ слева будет 13px.

Посмотрите пример

Как минимум отступ слева в 13px, а справа 37px - уже говорит о том, что дочерний блок не находится по центру родителя.

Отцентрировать блок относительно родителя можно несколькими способами, в вашем случае, чтобы не изменять сильно вёрстку, предлагаю следующий вариант:

.parent {
  position: relative;
}

.parent .children {
  position: absolute;
  left: 50%;
  transfrom: translateX(-50%);
}

.team__inner {
  display: flex;
  flex-wrap: wrap;
}

.team__item {
  width: 25%;
  text-align: center;
  padding: 0 15px;
  margin-bottom: 60px;
  position: relative;
}

.team__name {
  font-size: 19px;
  font-weight: 500;
  text-transform: uppercase;
  color: #11749e;
  margin-bottom: 14px;
}

.team__prof {
  font-size: 14px;
  font-weight: 500;
}

.team__photo {
  display: block;
  max-width: 100%;
  height: auto;
}

.team__info {
  position: absolute;
  background: red;
  padding: 1.6em 2.6em 2em 2.6em;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12%;
}

<section class="team area">
  <div class="container">
    <div class="area__title">
      <h2 class="suptitle__area">Our team</h2>
      <p class="letter">t</p>
    </div>
    <p class="subtitle__area">Sales long tail influencer pitch release niche market.</p>

    <div class="team__inner">
      <div class="team__item">
        <img class="team__photo" src="img/team/team1.jpg" alt="">
        <div class="team__info">
          <div class="team__name">John Snow</div>
          <div class="team__prof">CEO</div>
        </div>
      </div>
      <div class="team__item">
        <div class="test"><img class="team__photo" src="img/team/team2.jpg" alt=""></div>
        <div class="team__info">
          <div class="team__name">Lady Sansa</div>
          <div class="team__prof">WebDesigner</div>
        </div>
      </div>
      <div class="team__item">
        <img class="team__photo" src="img/team/team3.jpg" alt="">
        <div class="team__info">
          <div class="team__name">Dadiv Smith</div>
          <div class="team__prof">Photographer</div>
        </div>
      </div>
      <div class="team__item">
        <img class="team__photo" src="img/team/team4.jpg" alt="">
        <div class="team__info">
          <div class="team__name">Lady Sansa</div>
          <div class="team__prof">Photographer</div>
        </div>
      </div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Относительное позиционирование + адаптивность

Ответы (1 шт):