title: CSS Flex Box won't align properly
body: <p>I have the following html code:</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>body{
      background-color: #ddd;
  }
  .container{
      /*width: 100%;
      height: 1100;
      background-color: #666;*/
      display: -webkit-flex;
      display: flex;
      /*flex-direction:column;
      flex-wrap: column nowrap;
      flex-flow:column wrap;*/
      flex-direction:column;
      align-items:center;
      justify-content:center;
  }
  .news{
      width: 453px;
      height: 168px;
      background-color: #fff;
      border: 1px solid #999;
      padding: 15px;
      margin-bottom: 10px;
  }
  .video{
      width: 288px;
      height: 168px;
      background-color: #fff;
      border: 1px solid #999;
      padding: 15px;
      margin-bottom: 10px;
  }
  #news1{
      margin-left: 10px;
      margin-right: 5px;
      margin-top: 10px;
  }
  #news2{
      margin-left: 5px;
      margin-right: 10px;
      margin-top: 10px;
  }
  #video1{
      margin-left: 10px;
      margin-right: 5px;
      margin-top: 10px;
  }
  #video2{
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px;
  }
  #video3{
      margin-left: 5px;
      margin-right: 10px;
      margin-top: 10px;
  }
  .test,header {
      background-color: red;
      background-repeat: no-repeat;
      color: #fff;
      background-color: #fff;
      width: 968px;
      height: 68px;
      border: 1px solid #999;
      padding: 15px;
      margin-top: 10px;
      margin-bottom: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Brand&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/flex_styles.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container" id="maincontain"&gt;
        &lt;header&gt;
            &lt;h1&gt;Brand&lt;/h1&gt;
            &lt;img src="img/logo.png" alt="Brand-logo"&gt;
  
            &lt;!--&lt;nav&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a class="navlinks" href="https://facebook.com"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="navlinks" href="https://twitter.com"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="navlinks" href="https://instagram.com"&gt;Instagram&lt;/a&gt;&lt;/li&gt;
  
  
                &lt;/ul&gt;
            &lt;/nav&gt;--&gt;
        &lt;/header&gt;
  
        &lt;!-- News --&gt;
        &lt;section class="newz" id="newsid"&gt;
  
            &lt;article class="news" id="news1"&gt;
                &lt;!--&lt;img class="newspics" src="img/news1.png"&gt;
                &lt;p class="newstext"&gt;This is some random text.&lt;/p&gt;
                &lt;a class="newslinks" href="htpps://facebook.com"&gt;Link to     facebook article.&lt;/a&gt;
            --&gt;
            &lt;/article&gt;
  
            &lt;article class="news" id="news2"&gt;
                &lt;!--&lt;img class="newspics" src="img/news2.png"&gt;
                &lt;p class="newstext"&gt;This is some random text.&lt;/p&gt;
                &lt;a class="newslinks" href="htpps://facebook.com"&gt;Link to     facebook article.&lt;/a&gt;
                --&gt;
            &lt;/article&gt; 
        &lt;/section&gt;
  
        &lt;!-- Videos --&gt;
        &lt;section class="videos" id="videosid"&gt;
  
            &lt;video class="video" id="video1"&gt;
                &lt;source src="tst.mp4" type="video/mp4"&gt;
            &lt;/video&gt;    
  
            &lt;video class="video" id="video2"&gt;
                &lt;source src="tst.mp4" type="video/mp4"&gt;
            &lt;/video&gt;    
  
            &lt;video class="video" id="video3"&gt;
                &lt;source src="tst.mp4" type="video/mp4"&gt;
            &lt;/video&gt; 
        &lt;/section&gt;
  
        &lt;!-- Footer --&gt;
        &lt;footer class="footer" id="footerid"&gt;
            &lt;div class="test"&gt;
                &lt;a class="footlinks" href="https://www.facebook.com"&gt;facebook&lt;/a&gt;
            &lt;a class="footlinks" href="https://www.facebook.com"&gt;facebook&lt;/a&gt;
            &lt;a class="footlinks"href="https://www.facebook.com"&gt;facebook&lt;/a&gt;
            &lt;/div&gt;
        &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So my questions:</p>
  
  <p>Why aren't my news boxes on the same height, or why are my videos on the same height, and how to fix it?</p>