Circle CSS needs to be consistent whether it contains 1 digit ,2 digit or 3 digit number inside it [duplicate]

Question

Circle CSS is not consistent as the number of digits is getting changed. If the value is one digit then the circle shape became egg shape.And shape is getting distorted when it is three digit number.

.my-progress-value {
  background-color: deepskyblue;
  color: white;
  border-radius: 100%;
  font-size: 7pt;
  padding: 8px 5px 8px 5px;
  position: absolute;
  margin-top: -11px;
}
.my-progress-container {
  width: 200px;
  padding-top: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.my-progress {
  background-color: deepskyblue;
  width: 60%;
  height: 8px;
  text-align: right;
}

<div class="col-md-3" id="1">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">0</span>
    </div>
  </div>
</div>
<div class="col-md-3" id="2">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">49</span>
    </div>
  </div>
</div>
<div class="col-md-3" id="3">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">100</span>
    </div>
  </div>
</div>

Here is Fiddle

Answer 1

Set same height and width in .my-progress-value class.

 .my-progress-value {
        background-color: deepskyblue;
        color: white;
        border-radius: 100%;
        font-size: 7pt;
        padding: 8px 5px 8px 5px;
        position: absolute;
        margin-top: -11px;
        width:50px; //add this
        height:50px;  //add this
    }