title: justify-content: flex-start is not working
body: <p>I was trying to align all the elements in the website to have at most 3 elements in a row and have them align to the left.</p>
  
  <p>But I got the following result. <a href="https://i.stack.imgur.com/wTtKz.png" rel="nofollow noreferrer">(website image)</a></p>
  
  <p>I used Ruby on Rails to create this website so it might be hard to realize the code for some people.</p>
  
  <p>My 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>h1 {
    text-align: center;
  }
  
  footer {
    text-align: center;
  }
  
  .blog {
    border: 4px solid black;
    border-radius: 10px;
    background-color: lightgray;
    text-align: center;
    margin: 2% auto;
    padding: 10px;
    min-width: 33%;
    max-width: 33%;
    overflow: auto;
  }
  
  .blog-container {
    display: flex;
    flex-flow: row wrap;
    width: 80%;
    margin: 0px auto;
    justify-content: flex-start;
  }
  
  .new-blog-form {
    margin: 0px 30%;
  }
  
  .text-area {
    width: 100%;
    height: 400px;
  }
  
  .title-input {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;title&gt;My Blog&lt;/title&gt;
  &lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"&gt;
  
  &lt;body&gt;
    &lt;h1&gt;My Blogs&lt;/h1&gt;
    &lt;div class="blog-container"&gt;
      &lt;% @blogs.each do |blog| %&gt;
        &lt;div class="blog"&gt;
          &lt;p class="title"&gt;
            &lt;%= blog.title %&gt;
          &lt;/p&gt;
          &lt;p class="time"&gt;
            &lt;%= blog.created_at %&gt;
          &lt;/p&gt;
          &lt;%= link_to 'Learn More', blog_path(blog), class: "btn btn-info" %&gt;
        &lt;/div&gt;
        &lt;% end %&gt;
    &lt;/div&gt;
    &lt;footer&gt;
      &lt;%= link_to 'New Blog', '/blogs/new', class: "btn btn-primary" %&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any suggestion is helpful to me. Thank you.</p>
  
  <hr>
  
  <p>Update:</p>
  
  <p>The problem was solved by erasing two margin statements, one in .blog and one in .blog-container</p>
  
  <p>Thank you for your help.</p>