htmlcssruby-on-railsflexbox

justify-content: flex-start is not working

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.

But I got the following result. (website image)

I used Ruby on Rails to create this website so it might be hard to realize the code for some people.

My 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%;
}
<!DOCTYPE html>
<html>
<title>My Blog</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body>
  <h1>My Blogs</h1>
  <div class="blog-container">
    <% @blogs.each do |blog| %>
      <div class="blog">
        <p class="title">
          <%= blog.title %>
        </p>
        <p class="time">
          <%= blog.created_at %>
        </p>
        <%= link_to 'Learn More', blog_path(blog), class: "btn btn-info" %>
      </div>
      <% end %>
  </div>
  <footer>
    <%= link_to 'New Blog', '/blogs/new', class: "btn btn-primary" %>
  </footer>
</body>

</html>

Solution

  • The problem was solved by erasing two margin statements, one in .blog and one in .blog-container

    Answered by Original Poster