Progress line with numbers - html

Question

I try to create a progress line for my page that looks like that:
(1)------------(2)------------(3)------------(4)
Step #1 Step #2 Step #3 Step #4
but I cannot set the last bullet of my list to stay at the very very right.
The code I have write is based on ul list, and you can find the sample code on jsfiddle.
My code is the following:
.container {
padding: 60px;
}
#progress-container {
margin: 0;
padding: 0;
list-style: none;
border-top: 2px solid #999;
position: relative;
margin-top: 20px;
}
#progress-container li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
display: inline-block;
width: 24%;
text-align: center;
padding-top: 20px;
font-size: 16px;
color: #2A668A;
}
#progress-container li::before {
content: '1';
position: absolute;
top: -20px;
left: 45%;
background: #EEB0B1;
padding: 5px 12px;
font-size: 18px;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #FFF;
font-weight: bold;
}
#progress-container li.active::before {
background: #d33434;
}
#progress-container li:nth-child(1) {
margin-left: -12%;
}
#progress-container li:nth-child(1)::before {
content: '1';
}
#progress-container li:nth-child(2) {
margin-left: 6%;
}
#progress-container li:nth-child(2)::before {
content: '2';
}
#progress-container li:nth-child(3) {
margin-left: 6%;
}
#progress-container li:nth-child(3)::before {
content: '3';
}
#progress-container li:nth-child(4) {
margin-right: 12%;
}
#progress-container li:nth-child(4)::before {
content: '4';
}
<div class="container">
<ul id="progress-container">
<li class="active">
Level #1
</li>
<li>
Level #2
</li>
<li>
Level #3
</li>
<li>
Level #4
</li>
</ul>
</div>
Note : The code in JsFiddle is the current one that needs to be corrected. If you have any suggestion on how to fix the visual problem, please help, or if you have any other way to do it, just tell me :)
UPDATE
Just if somebody is interested in the feature the code is here:
#progress-container.horizontal {
margin: 20px 0 0;
padding: 0;
list-style: none;
border-top: 2px solid #999;
position: relative;
}
#progress-container.horizontal li {
margin: 0;
padding: 20px 0 0;
list-style: none;
position: relative;
display: inline-block;
width: 24%;
text-align: center;
font-size: 16px;
color: #2A668A;
}
#progress-container.horizontal li::before {
content: '1';
position: absolute;
top: -20px;
left: 41%;
background: #EEB0B1;
padding: 5px 12px;
font-size: 18px;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #FFF;
font-weight: bold;
}
#progress-container.horizontal li.active::before {
background: #d33434;
}
#progress-container.horizontal li:nth-child(1) {
left: -12%;
}
#progress-container.horizontal li:nth-child(1)::before {
content: '1';
}
#progress-container.horizontal li:nth-child(2) {
left: -3%;
}
#progress-container.horizontal li:nth-child(2)::before {
content: '2';
}
#progress-container.horizontal li:nth-child(3) {
left: 5%;
}
#progress-container.horizontal li:nth-child(3)::before {
content: '3';
}
#progress-container.horizontal li:nth-child(4) {
left: 14%;
}
#progress-container.horizontal li:nth-child(4)::before {
content: '4';
}
#progress-container.vertical {
margin: 20px 0 0;
padding: 0;
list-style: none;
border-left: 2px solid #999;
position: relative;
}
#progress-container.vertical li {
margin: 0 0 25px;
padding: 0 0 0 50px;
list-style: none;
position: relative;
font-size: 16px;
color: #2A668A;
display: block;
left: -18px;
}
#progress-container.vertical li::before {
content: '';
position: absolute;
top: -6px;
left: 0;
background: #EEB0B1;
padding: 5px 12px;
font-size: 18px;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #FFF;
font-weight: bold;
}
#progress-container.vertical li.active::before {
background: #d33434;
}
#progress-container.vertical li:nth-child(1)::before {
content: '1';
}
#progress-container.vertical li:nth-child(2)::before {
content: '2';
}
#progress-container.vertical li:nth-child(3)::before {
content: '3';
}
#progress-container.vertical li:nth-child(4)::before {
content: '4';
}
<ul id="progress-container" class="horizontal hidden-xs">
<li class="active">
Step 1
</li>
<li>
Step 2
</li>
<li>
Step 3
</li>
<li>
Step 4
</li>
</ul>
<ul id="progress-container" class="vertical visible-xs">
<li class="active">
Step 1
</li>
<li>
Step 2
</li>
<li>
Step 3
</li>
<li>
Step 4
</li>
</ul>

Answer 1

Use CSS counters
*{box-sizing: border-box}
body{padding: 60px 0}
ul {
counter-reset: section;
list-style-type: none;
text-align: center
}
li:before {
counter-increment: section;
content: counters(section,"");
position: absolute;
top: -60px;
left: 50%;
margin-left: -15px;
width: 32px;
height: 32px;
border-radius: 50%;
background: red;
text-align: center;
line-height: 32px;
color: white
}
li.active, li:hover, li:hover:before{
color: #7cbee6
}
li.active:before, li:hover:before{
background: #012e54
}
li:not(:last-child):after{
content: '';
position: absolute;
top: -44px;
left: 70px;
width: 40px;
height: 1px;
border-top:2px dashed red
}
li{
display: inline;
position: relative;
padding: 10px 14px;
}
<div class="container">
<ul id="progress-container">
<li class="active">
Level #1
</li>
<li>
Level #2
</li>
<li>
Level #3
</li>
<li>
Level #4
</li>
</ul>
</div>

Answer 2

This seam to do the trick:
http://jsfiddle.net/3kngwfgf/2/
#progress-container li:nth-child(4) {
left: 12%;
}
I removed the margin-left: and just added left: