Help with making ui frames ordered?

Hello! I am working on a techy game and I have a sprint UI that is split up by frames. I want it to be ordered and use frames so I can dynamically adjust how many there are, but it looks strange.
image

If you can see, in the middle and one on the right is a slightly different size then the rest. I wanna make them all equal but I dont know how

This is probably not the best way to do this but I am new to UI

image

Basically a ton of sections in a list, with it evenly spaced horizontally.

Please check properties of the sections. Borderlines of the strange ones looks thiner than the others.

All them are the same, I just checked and also everyone should be the same since I just duplicated them

Have you tried UIFlex?
Add one as a child of the StaminaBarSection. Set the FlexMode to Fill
Set the size of the StaminaBarSection to (0, 0, 1, 0).

Here’s an example:

I hope this is something you’re looking for.
If not, it would be helpful if you could send a download of the UI instance

Apologies for delay, this does make it even however mine is more of a mask, like a smooth bar that has the vertical lines over it.
Attached is the model file:
Stamina.rbxm (6.6 KB)