title: Change background color of the second child in a flexbox
body: <p>I want to set the background color of the second child div in a flexbox to red but am unable to do so. I am only able to set the background color of the first child. </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>.main{
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
  }
  .left_col{
    width: 350px;
    background-color: green;
  };
  .right_col{
    width: 350px;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
    &lt;div class="left_col"&gt;
    This is the left column. It should be green.
    &lt;/div&gt;
    &lt;div class="right_col"&gt;
    This is the right column. It should be red.
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/mademoiselletse/e5nhca58/2/" rel="nofollow">https://jsfiddle.net/mademoiselletse/e5nhca58/2/</a></p>
  
  <p>The text of the second child is also aligning differently from the first child. The first child's text is aligning to the left whereas the second child's is aligning to center. I am new to flexbox. I would very much appreciate your help!</p>