JSFiddle - React, Tailwind, and code Playground

HTML

Not centered when translateX is -50%
<br />
<br />
<div class="container">
  <div class="el">
    elem
  </div>
  <div class="pp pp1">
    <div style="width:10px; height: 10px; margin: 0 auto; background-color: red;"></div>
    popoverasdasd asjdjasd sdfsdfsdfsdf
  </div>
</div>

<br />
<br />
<br />
<br />

Expected result comes when translateX is -43%
<br />
<br />
<div class="container">
  <div class="el">
    elem
  </div>
  <div class="pp pp2">
    <div style="width:10px; height: 10px; margin: 0 auto; background-color: red;"></div>
    popoverasdasd asjdjasd sdfsdfsdfsdf
  </div>
</div>

CSS

.container {
  width: 30px;
  margin: 0 auto;
}

.el {
  width: 30px;
  height: 30px;
  background-color: pink;
  border-radius: 100%;
}

.pp {
  position: absolute;
  max-width: 300px;
  background-color: yellow;
}

.pp1 {
  transform: translateX(-50%);
}

.pp2 {
  transform: translateX(-43%);
}