title: Why is the div wider than its content?
body: <p>I'm trying to create a page with a 20-60-20 flex fill layout but the div in the center which should make up 60% of the page is wider than its content so it makes its content look like it is off-center.</p>
  
  <p><a href="https://i.stack.imgur.com/WwCJy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WwCJy.png" alt="enter image description here"></a></p>
  
  <p>home.component.html:</p>
  
  <pre><code>&lt;div fxLayout="row wrap"  fxLayoutGap="20px grid"&gt;
    &lt;div *ngFor="let data of DUMMY_DATA"&gt;
      &lt;mat-card class="example-card" &gt;
        &lt;img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"&gt;
        &lt;mat-card-content class="description-max-height"&gt;
          &lt;p&gt;
            {{data.description.length &gt; 100 ? data.description.substring(0, 100) + '...' : data.description}}
          &lt;/p&gt;
        &lt;/mat-card-content&gt;
        &lt;mat-card-actions&gt;
          &lt;button mat-button&gt;LIKE&lt;/button&gt;
          &lt;button mat-button&gt;SHARE&lt;/button&gt;
        &lt;/mat-card-actions&gt;
      &lt;/mat-card&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>home.component.css:</p>
  
  <pre><code>.example-card {
    width: 250px;
    height: 300px;
  }
  
  .description-max-height {
    max-height: 30px;
  }
  </code></pre>
  
  <p>app.component.html:</p>
  
  <pre><code>&lt;mat-toolbar color="primary" style="margin-bottom: 20px"&gt;
    &lt;mat-toolbar-row&gt;
      &lt;span&gt;Some title&lt;/span&gt;
      &lt;span class="toolbar-spacer"&gt;&lt;/span&gt;
      &lt;button mat-button color="accent" (click)="openLoginDialog()"&gt;Log In&lt;/button&gt;
      &lt;button mat-button color="accent" (click)="openSignupDialog()"&gt;Register&lt;/button&gt;
    &lt;/mat-toolbar-row&gt;
  &lt;/mat-toolbar&gt;
  &lt;div fxLayout="row"&gt;
    &lt;div fxFlex="20"&gt;&lt;/div&gt;
    &lt;router-outlet fxFlex="60"&gt;&lt;/router-outlet&gt;
    &lt;div fxFlex="20"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.compoenent.css:</p>
  
  <pre><code>.toolbar-spacer {
    flex: 1 1 auto;
  }
  </code></pre>
  
  <p>How can I implement this so that  will display the home.component.html on the center of the page without it being wider than it's contet?</p>
  
  <p>You can find a Stackblitz example <a href="https://stackblitz.com/edit/angular-ivy-6dhaww" rel="nofollow noreferrer">here</a></p>