title: mat card is not fitting with entire page
body: <p>I am using Angular Material, Bootstrap.</p>
  <p>I am trying to show the mat-card which should fit for all screen.</p>
  <p>But I am seeing an empty spaces right side of the card</p>
  <p>For some screen resolution it is fitting properly. Can anyone suggest what I need to here</p>
  <p>StacKblitz URL: <a href="https://stackblitz.com/edit/material-responsive?file=src/app/app.component.ts" rel="nofollow noreferrer">demo</a></p>
  <p>Below attached the screen shot of empty space</p>
  <p><a href="https://i.stack.imgur.com/c6lOW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c6lOW.png" alt="enter image description here" /></a></p>
  <p>Mobile View is in below screen shot
  <a href="https://i.stack.imgur.com/vnlQv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vnlQv.png" alt="enter image description here" /></a></p>
  <p>Working fine with below screen resolution
  <a href="https://i.stack.imgur.com/SEFKd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SEFKd.png" alt="enter image description here" /></a></p>