Angular Material Ripple Effect is off to side of element

I have added angular material to my project and set up an empty component with the html from the tabs example.

<mat-tab-group>
    <mat-tab label="First"> Content 1 </mat-tab>
    <mat-tab label="Second"> Content 2 </mat-tab>
    <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Every time I click on a tab or even if I add a button the ripple effect shows outside the element off to the side. Here's a picture of what is happening. https://imgur.com/a/rSQHFNQ