Progress step tracker does not scale down in size - html

Question

I am making a progress step tracker, like the type you'd see in multi-page forms, using CSS and Bootstrap and I am having issues with it scaling down to different screen sizes.
When I move to certain smaller screen sizes, I am having issues with the bars between the steps moving further left then their steps.
My markdown:
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-ls-offset-3">
<div class="work-order-progress">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center first-item">
<span class="step-number">1</span>
<span class="step-name">Initial Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">2</span>
<span class="step-name">Work In Progress</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">3</span>
<span class="step-name">Final Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">4</span>
<span class="step-name">Complete</span>
</div>
</div>
</div>
</div>
And my style sheet:
.work-order-progress {
.div {
margin-right: 75px;
vertical-align: top;
display: inline-block;
text-align: center;
font-weight: bold;
}
.step-number {
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
display: inline-block;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
:not(.first-item) {
.step-number:before {
width: 85%;
height: 5px;
content: '';
position: absolute;
top: 10px;
left: -87px;
z-index: -1;
border-radius: 25px
}
}
.step-name {
display: block;
color: #a5a5a5;
font-weight: bold;
}
.fill {
.step-number {
color: #ffffff;
background: #22a925;
}
.step-number:before {
background-color: #22a925;
}
}
:not(.fill) {
.step-number {
color: #a5a5a5;
background: #ededed;
border: 1px solid;
}
.step-number:before {
background-color: #ededed;
}
}
}
I am conditionally adding the class that makes it active based on business logic, which is removed in this example.

Answer 1

I built a live demo here:
.work-order-progress .div {
margin-right: 75px;
vertical-align: top;
display: inline-block;
text-align: center;
font-weight: bold;
}
.work-order-progress>div{
}
.work-order-progress .step-number {
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
display: inline-block;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
.work-order-progress :not(.first-item) .step-number:before {
width: calc(100% - 35px);
height: 5px;
content: '';
position: absolute;
top: 10px;
left: calc(-50% + 15px);
z-index: -1;
border-radius: 25px;
}
.work-order-progress .step-name {
display: block;
color: #a5a5a5;
font-weight: bold;
}
.work-order-progress .fill .step-number {
color: #ffffff;
background: #22a925;
}
.work-order-progress .fill .step-number:before {
background-color: #22a925;
}
.work-order-progress :not(.fill) .step-number {
color: #a5a5a5;
background: #ededed;
border: 1px solid;
}
.work-order-progress :not(.fill) .step-number:before {
background-color: #ededed;
}
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-ls-offset-3">
<div class="work-order-progress">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center first-item">
<span class="step-number">1</span>
<span class="step-name">Initial Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">2</span>
<span class="step-name">Work In Progress</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">3</span>
<span class="step-name">Final Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">4</span>
<span class="step-name">Complete</span>
</div>
</div>
</div>
</div>