title: How to add margin with Angular Flex Layout?
body: <p>How can I add margin or padding to a container when using the Flex Layout Module? </p>
  
  <p>Template:</p>
  
  <pre><code>&lt;div class="container"&gt;
    hell
    &lt;div fxLayout="column" fxLayoutAlign="center center"&gt;
      &lt;mat-card fxFill&gt;Simple card test&lt;/mat-card&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Style:</p>
  
  <pre><code>.container{
      margin: 60px;
  }
  </code></pre>
  
  <p>I noticed it doesn't seem to be adding the correct amount of margin. You'll be able to see in the screenshot, the flex container has less margin than the text outside of it. </p>
  
  <p><a href="https://i.stack.imgur.com/n2hMy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/n2hMy.png" alt="enter image description here"></a></p>