Custom Graph using HTML not working as expect

Hi all,

I’m having trouble with getting a linear scale graphic to appear as expected on my website.

I’ve got a scale from 0 to 100% and HTML code to Offset Left Margin according to a CMS collection value.

What I’ve got is three markers on each linear scale (pink, green, blue) and its working with the CMS data correctly, however I’m noticing values that are at 0 correctly display with a slight stagger offset of 5px (so the markers are legible, even if they represent the same value), but when all three markers are set to data that = 100% , the markers end up sitting directly on top of one another for some reason (making them hard to differentiate, hence the reason for the 5px stagger).

I have some test CMS items to demonstrate this. When values are closer to zero, the desired staggering of the three markers is correct, but lose their offsets, as the CMS value approaches 100 (%) !!

What am I doing wrong ?? Please help!


Here is my site Read-Only: https://preview.webflow.com/preview/atelieraha?utm_medium=preview_link&utm_source=designer&utm_content=atelieraha&preview=00aa6b8b31b7b20c05dc042dd9242674&pageId=5ea6341b808bdf00eb967172&mode=preview