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>