The datepicker body is a tad off on the padding-right. See photo below:
There seems to be some styling applied on your page, which affects the datepicker.
Please provide a link to your page, where we can check this.
I located the line that is causing it…
I just made the change in my custom.css to override it with this:
.daterangepicker .drp-calendar.left {
padding: 8px 0 !important;
}
Your problem is that some CSS has overridden this line (that’s why it is showing as commented out) and you should resolve that issue first.
Scroll to look above the .daterangepicker .drp-calendar.left commented-out css.
Not always a good idea to simply override the offending CSS override with a repeated CSS !important override.
By the way, in your fix you spelt the class incorrectly.
drop-calendar >> drp-calendar
Just checking you noticed.
Oh, I believe the autocorrect replaced the drp with drop. In fact it did again when I was typing this. Ha!
I deselected it manually when I was inspecting the element on the page. As I turned it off and on, that’s when I realized the discrepancy. So I looked at my custom.css and found that there was nothing related to these settings, I proceeded to look at the original .css.
When I searched inside datarangepicker.min.css for .datarangepicker .drp-calendar.left and I saw the .drp-calendar.left{padding:8px 0 8px 8px} and .daterangepicker .drp-calendar.right{padding:8px}
So I just edited my custom.css to match the right side and override the datarangepicker.min.css with my edit to my custom.css with .drp-calendar.left { padding: 8px } !important …
Now all is well.