โœŠ๐Ÿฟ Black Lives Matter. Please consider donating to Black Girls Code today.
๐Ÿ‡ Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

RangeSlider final element is not aligned with the rest

Still quite new to css and layout so please forgive me for this trivial question. I have created a rangeslider with the following code (the slider value is temporary):

date_list2 = {0:{'label': "2-2", 'style':{'font-size':'10px'}},
 1:{'label': "2-2", 'style':{'font-size':'10px'}},
...
 14:{'label': "2-2", 'style':{'font-size':'10px', 'margin-right':'10px'}}}

The layout section:

 html.Div(
            dcc.RangeSlider(
            id='my-range-slider',
            min=0,
            max=14,
            value=[0, 14],
            step = None,
            marks = date_list2,
            allowCross=False
            ),style={'width': '60%', 'display': 'inline-block', 'height': '50px'},)

The final element is out of line for some reason even it clearly has enough space to fit it.

image

I have tried changing value, changing the font-size and the margin for the mark style but it does not fix the behavior. I understand the string probably hits the border of the component that is why it is wrapping to another line

Edit: I sort of got it working with

โ€˜text-indentโ€™:โ€™-2emโ€™

for the last marker. Is this the right approach?