Progress bar seems to be offset

I'm trying to add lines on my progress bar to show milestones and I'm having a bit of trouble with getting it perfect. There always seems to be an offset and I cant figure out whats wrong with it. The progress bar below is set to 40% and the first milestone is at 40% but its so offset and if you look at the 100 its not even on the progress bar. I need a way to make this exact. Any suggestions?

Your progressbar is properly aligned. The problem is the absolute positioning of your .progress-checkpoint elements.
Youre missing position:relative on .progress so the absolute positioning does start from the correct point.

Add the following to your CSS to make it work

.progress {
position:relative;
}

In addition you need to remove overflow:hidden from the .progress Element so your text marks are not cut off.