Center a progresser bar on every device

Question

I'm creating my first website from a template and I've add a progress bar. It's well centered on a computer when I put the width at 140% but on a phone, you can't see all the progressbar. And when I put the width at 100%, it's not centered as I'd like. Is there a way to make it work?

Here's the HTML code:

.container{
  width: 140%;
  position: absolute;
  z-index: 1;
}
.progressbar li{
  float: left;
  width: 16.66667%;
  position: relative;
  text-align: center;
}

.progressbar li:before{
  content:"1";
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

.progressbar{
  counter-reset: step;
}
.progressbar li:before{
  content:counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

 <div class="container">
   <ul class="progressbar ">
      <li class="active">step 1</li>
      <li class="active">step 2</li>
      <li>step 3</li>
      <li>step 4</li>
      <li>step 5</li>
      <li>step 6</li>
   </ul>
</div>