Card grid layout always centered using CSS and angular material

Question

Im trying to make a simple card grid layout but i get weird spacing on the right of the layout, what i want its that the content is always centered with the same margin in both sides of the layout. My code: https://stackblitz.com/edit/angular-9-material-starter-ps6mp7?file=src%2Fapp%2Fapp.component.html The area in purple is the weird spacing

Answer 1

Try adding justify-content: center; align-items: center; to your content2 class

.content2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}