I try to use a Bootstrap progress bar to show text on. progress bar works well but the text is not centered to the whole progress bar. Just centered to the gray area. If the progress bar starts to get filled, the text is moving to the right. How I can solve it that the text will stay centered? I use it this way:

        <div class="progress" style="height: 30px">
          <div
            id="theprogressbar"
            class="progress-bar progress-bar-striped bg-success"
            role="progressbar"
            style="width: 0%; transition: none"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
          <div id="theprogressbartext" class="d-flex justify-content-center align-items-center h-100 w-100">0/0</div>
        </div>

If I update the text I use it this way:

function setProgressBar(percent, text) {
  $("#theprogressbar").attr("style", "width:" + percent + "%");
  $("#theprogressbar").attr("aria-valuenow", percent);
  $("#theprogressbartext").html(text);
}

Any idea what I do wrong here? I use Bootstrap vom CDN: https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js