title: Angular Flex Layout refuses to center container horizontally, applied directives to div, router outlet, everything, yet it still wont center
body: <p>Recording of the elements insepcted: <a href="https://streamable.com/nmhaa" rel="nofollow noreferrer">https://streamable.com/nmhaa</a> </p>
  
  <p>The container within 'interactive-models' will simple not center inside his parent container. </p>
  
  <p>in App Component Html:</p>
  
  <pre><code>&lt;router-outlet fxLayout="column" fxFlexAlign="center" fxLayoutAlign="center center"&gt;
  </code></pre>
  
  <p>Inside Interactive-models commponent.html:</p>
  
  <pre><code>&lt;div fxLayout="row" fxLayoutAlign="center center" 
  </code></pre>
  
  <p>fxHide.lt-md="true" class="container theStupidList" fxFlex="90%"></p>
  
  <p>The Material grid list:</p>
  
  <pre><code>&lt;mat-grid-list class="item" fxFlex="90" fxFlexAlign="center"  
  cols="3" rowHeight="600" gutterSize="15px"&gt;
  </code></pre>
  
  <p>In my CSS:</p>
  
  <pre><code>.theStupidList {
  justify-content: center!important;
  justify-self:center !important;
  justify-items: center!important; }
  </code></pre>