I am designing a website. Currently, I am trying to align several div blocks in rows. My code look as follows
.main-content h3 { margin-bottom: 20px; font-size: 2em; color: #333; text-align: center;}.category-select a { display: flex; justify-content: start; padding: 15px 0px 0px 10em; font-size: 1em; color: #27285f;}.category-title { display: inline-block; padding: 0px 10px 0px 10em;}<div class="main-content"><h3>please choose a category</h3><div class="group-select"><div class="category-select"><a href="#">Housing</a></div><div class="category-title"><a href="#">Housing Available</a> ...</div></div><div class="group-select"><div class="category-select"><a href="#">For Sale</a></div><div class="category-title"><a href="#">Appliance</a> ...</div></div><div class="group-select"><div class="category-select"><a href="#">Jobs</a></div><div class="category-title"><a href="#">Admin Office</a> ...</div></div></div>The categories are not aligned line by line horizontally as the picture shows:
I tried to change add margin and set it to auto in category title class,but it does not work.Is it something wrong with the inline-block property?