background image on 3 boxes not scaling correctly fix

HTML

<h2>Percentage Background</h2>
<div class="container mb-3">
  <div class="row">
    <div class="col-sm">
      <div class="img-box img-box-1-per"></div>
    </div>
    <div class="col-sm">
      <div class="img-box img-box-2-per"></div>
    </div>
    <div class="col-sm">
      <div class="img-box img-box-3-per"></div>
    </div>
  </div>
</div>

<h2>Pixels Background</h2>
<div class="container mb-3">
  <div class="row">
    <div class="col-sm">
      <div class="img-box img-box-1-px"></div>
    </div>
    <div class="col-sm">
      <div class="img-box img-box-2-px"></div>
    </div>
    <div class="col-sm">
      <div class="img-box img-box-3-px"></div>
    </div>
  </div>
</div>

CSS

.img-box { 
 height:300px; 
 background:url(https://kruxor.com/images/ios-14-iphone.jpg) center no-repeat; 
}
.img-box-1-per {
    background-position-x: 20%;
}
.img-box-2-per {
    background-position-x: 40%;
}
.img-box-3-per {
    background-position-x: 60%;
}
.img-box-1-px {
    background-position-x: -200px;
}
.img-box-2-px {
    background-position-x: -400px;
}
.img-box-3-px {
    background-position-x: -600px;
}