The reason this is happening is because the `slds-table` class is applying a padding to the `td` elements within the lightning input date selector.

The exact style definition of this is

    .slds-table td,.slds-table th{ // column 414975 in minified css
        padding:.25rem .5rem; // This .5rem is causing your problem
        white-space:nowrap;
        position:relative
    }

This style was never meant to be applied to the date picker which results in the cells within being too large to fit in the container.

This is the style that **should be** applied but is being **overridden**:

    .slds-datepicker td{ // column 253420 in minified css
        padding:.25rem;
        text-align:center;
        font-size:.75rem
     }

You can become more familiar with the [CSS order of precedence here][1].

The `slds-datepicker` style appears 161,555 characters earlier in the code then the `slds-table` style which is what causes it to lose precedence.

This has other impacts that you didn't point out. For instance, when you mouse over the date picker, the rows of the inner table are highlighted grey which is also not supposed to happen.

**Unfortunately, since we can't put a `<style>` tag in a template and we don't have access to the inner workings of the component and CSS doesn't have the ability to use inline styles to modify child elements, The fix would be to stop using the `slds-table` class and apply your styles manually.**

I would argue this could be considered a bug/unintended behavior and you may be able to report it to SF for a fix.


  [1]: https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css