Relative positioning + adaptability

How can I remove the offset of a block that is positioned relative to another block approximately in the center?
With the screen shrinking, it moves to the left, I've been trying different ways for a day, I haven't found anything yet. Photo and code are attached. On normal screens, the photo is in one line and a white block with text in the middle is located. I really can't figure out why he's rolling around like that with the screen shrinking

Screen

.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>
Author: CbIPoK2513, 2020-05-29
Source

1 answers

left: 13% will give you the position of the block relative to the size of the parent.
If the parent is 100px and the block itself is 50px, then the padding on the left will be 13px.

See the example

enter a description of the image here

At least an indent of 13px on the left and 37px on the right already indicates that the child block is not centered on the parent.

You can center the block relative to the parent in several ways, in your case, in order not to change the layout much, I suggest the following option:

.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>
 3
Author: CbIPoK2513, 2020-05-29 15:07:28