title: Define mat-card-title width using percentage
body: <p>I would center mat-card-title text. so I need to put it's width to 100% but I don't get a result, only if I use "px".</p>
  
  <p>So I tried to put a width to all parents containers but no result .</p>
  
  <p>Here's my html file </p>
  
  <pre><code>&lt;div Fxlaout="row" fxLayoutGap="20px" class="container"&gt;
      &lt;div fxFlex=30&gt;
          &lt;mat-card&gt;
              &lt;mat-card-header&gt;
                  &lt;mat-card-title&gt;Collaborateurs sur ce projet&lt;/mat-card-title&gt;
              &lt;/mat-card-header&gt;
              &lt;mat-card-content&gt;
  
                  &lt;mat-list role="list" *ngFor="let per of Projet?.pers"&gt;
                      &lt;mat-list-item role="listitem"&gt;Nom : {{per.name}}&lt;/mat-list-item&gt;
                      &lt;mat-list-item role="listitem"&gt;poste : {{per.poste}}&lt;/mat-list-item&gt;
                  &lt;/mat-list&gt;
              &lt;/mat-card-content&gt;
          &lt;/mat-card&gt;
      &lt;/div&gt;
      &lt;div fxFlex&gt;
          &lt;mat-card&gt;
              &lt;mat-card-header&gt;
                  &lt;mat-card-title&gt;Les fonctionnalités du produit&lt;/mat-card-title&gt;
              &lt;/mat-card-header&gt;
              &lt;mat-card-content&gt;
                  &lt;mat-list role="list" *ngFor="let func of Projet?.backlog.fonctionnalite; let i=index"&gt;
                     &lt;mat-list-item role="listitem"&gt;Fonctionnalité #{{i}} : {{func.fonctionnalite}}&lt;/mat-list-item&gt;
                  &lt;/mat-list&gt;
              &lt;/mat-card-content&gt;
           &lt;/mat-card&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS file </p>
  
  <pre><code>  mat-card {
      margin-top: 20px;
      margin-bottom: 20px;
      padding: 0;
      width: 100%;
    }
    mat-card-header {
      background-color: #116a94;
      color: white;
      height: 50px;
      width: 100%;
    }
  
    .container {
      background-color: #87b6bd;
      width: 100%;
    }
    mat-card-title {
      line-height: 50px;
      text-align: center;
      vertical-align: middle;
      width: 100%;
    }
  
    div {
      width: 100%;
    }
  </code></pre>
  
  <p>I also added width persentage in my app.component.ts where I call my component:</p>
  
  <pre><code>&lt;app-navabar&gt;&lt;/app-navabar&gt;
  &lt;div style="width:100%"&gt;
     &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then I styles.css file I added <code>width:100%</code> to the body.</p>
  
  <p>I don't see where is the element that does not having a width of x%</p>