CSS: Progress bar, second background is appearing below bar instead of overlapping - html

Question

I'm trying to create a Progress Bar. If user has completed 20%, a bar with my set colour is being created with the correct width. But for some reason, its appearing below my progress bar instead of overlapping and I have no idea why.
Bonus question: Any ideas why text is not aligned to center?
CSS:
.progress-bar {
height: 20px;
width: 126px;
background: #BABABA;
position: relative;
}
.progress-bar span {
font-size: 1.1rem;
font-weight: 600;
line-height: 15px;
text-align: center;
position: relative;
}
.progress-bar div.bar {
height: 20px;
background: #336291;
position: absolute;
}
EJS:
<td>
<div class="progress-bar">
<span><%= gamedata[i].progressPercentage %></span>
<div class="bar" style="width:<%= gamedata[i].progressPercentage %>;"></div>
</div>
</td>

Answer 1

You should put the correct coordinates, so append the following lines:
.progress-bar div.bar {
/* your code here */
top: 0;
left: 0;
}
Bonus answer: your text is aligned in the center but your DOM element is not. What I suggest doing is giving automatic lateral margin and treating it as a block, like so:
.progress-bar span {
font-size: 1.1rem;
font-weight: 600;
line-height: 15px;
display: block;
margin: auto;
position: relative;
}

Answer 2

try this code nothing big changes. Some small changes in css and HTML.
.progress-bar {
height: 20px;
width: 126px;
background: #BABABA;
position: relative;
}
.progress-bar span {
font-size: 1.1rem;
font-weight: 600;
line-height: 15px;
text-align: center;
position: relative;
}
.progress-bar div.bar {
height: 20px;
background: #336291;
position: absolute;
}
Hear is html code:
<td>
<div class="progress-bar">
<div class="bar" style="width:<%= gamedata[i].progressPercentage %>;">
<center><%= gamedata[i].progressPercentage %></center>
</div>
</div>
</td>