The starting time gets clipped

[tanay-msp]

https://codesandbox.io/s/mmj3xzk4x?fontsize=14&file=/src/styles.css

As it is also visible in this example, the start time of the first day gets clipped (it shows "2:00pm" instead of "12:00pm". Is there a way I can modify the css in my code to fix this?

<div className="root" style={{ width: "80vw", height: "400px", "--cell-height": "20px", "--cell-width": "50px", }} >

Is there another css attribute I can add here to make the margin-left: 20px for the range box (that appears in blue)?