title: Margin-bottom not working in flexbox
body: <p>I have an issue where I have a flexbox, but I don't exactly want every single element to be spaced according to the properties given, so I want to play with margins.</p>
  
  <p>I have a header at the top of the box but I want spacing between it and the rest of the elements.</p>
  
  <p>So I want my list of <code>p</code> elements to be grouped together but spaced farther away from the heading.</p>
  
  <p>However, when I do <code>margin-bottom</code> it isn't having an effect (when I increase or decrease <code>margin-bottom</code> nothing changes).</p>
  
  <p>I was originally doing it in percents and changed it to pixels but that doesn't seem to be the issue either.</p>
  
  <p>In the snippet I would have no problem with how it looks but on a bigger browser there's hardly any space between the heading and the <code>p</code> elements which is the issue.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 70vh;
    width: 70%;
    margin: 5% auto 8% auto;
    background-color: white;
  }
  .container p {
    margin-bottom: 2%;
  }
  .container h2 {
    color: orange;
    font-size: 34px;
  }
  .middle p:first-child {
    margin-top: 8%;
  }
  .bspace {
    margin-bottom: 50px;
  }
  .box h2 {
    color: orange;
    text-align: center;
  }
  .left {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    order: 1;
    width: 30%;
  }
  .middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    width: 45%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="left"&gt;
      &lt;img src="home.jpg" alt="Picture of kid"&gt;
      &lt;img src="catering.jpg" alt="Picture of kid"&gt;
    &lt;/div&gt;
    &lt;div class="middle"&gt;
      &lt;h2 class="bspace"&gt; Some Text &lt;/h2&gt;
      &lt;p&gt;Sample&lt;/p&gt;
      &lt;p&gt;Sample&lt;/p&gt;
      &lt;p&gt;Sample&lt;/p&gt;
      &lt;p&gt;Sample&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>