title: Can't get flexbox elements to line up horizontally
body: <p>I can't figure out why I can't get these three flexbox elements to line up horizontally across the screen. The left and center elements work fine side by side, and the center div is properly centered on the screen. The right side column sits properly to the right, but for some reason it sits towards the bottom, below where the bottom of the center element would be. </p>
  
  <pre><code>.container {
      width: 100%;
      max-width: 800px;
      min-height: 90%;
      font-size: .75rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
  }
  
  .left-column {
      left: 2px;
      max-height: 90%;
      max-width: 25%;
      position: relative;
      float: left;
      font-family: Poppins;
      color: #D7DBDE;
      margin-top: 11%;
      padding-top: 20px;
      text-shadow: 1px 2px 3px;
  }
  
  .center-column {
      padding-top: 15px;
      max-width: 50%;
      margin-left: auto;
      margin-right: auto;
      position: relative;
  }
  
  .right-column {
      right: 2px;
      max-height: 90%;
      max-width: 25%;
      position: relative;
      float: right;
      font-family: Poppins;
      color: #D7DBDE;
      text-shadow: 1px 2px 3px;
  
  }
  </code></pre>