HTML div块水平对齐异常求助：分类模块无法按行排列

我正在设计一个网站，尝试将多个div块按行水平对齐，但分类模块无法像示例图那样逐行水平排列。尝试为category-title类添加margin:auto未生效，请问是inline-block属性存在问题吗？

我的代码如下：

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

/* Header styles */
.header {
  background-color: #eee8e8;
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo a {
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-link {
  text-decoration: none;
  font-size: 1em;
  color: #007bff;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #0056b3;
}

/*category section*/
.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;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Choose category</title>    
  </head>
  <body>
    <header class="header">
      <div class="header-top">        
        <nav class="nav-links">
          <a href="/sign-up" class="nav-link">Sign Up</a>
          <a href="/log-in" class="nav-link">Log In</a>
        </nav>
      </div>
    </header>
    <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 class="category-title">
          <a href="#">Housing Wanted</a>
        </div>
        <div class="category-title">
          <a href="#">Other</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 class="category-title">
          <a href="#"> Clothes </a>
        </div>
        <div class="category-title">
          <a href="#"> Electronics </a>
        </div>
        <div class="category-title">
          <a href="#"> Free </a>
        </div>
        <div class="category-title">
          <a href="#"> General </a>
        </div>
        <div class="category-title">
          <a href="#"> Garage Sale </a>
        </div>
        <div class="category-title">
          <a href="#"> Household </a>
        </div>
        <div class="category-title">
          <a href="#"> Transportation </a>
        </div>
        <div class="category-title">
          <a href="#"> Wanted </a>
        </div>
        <div class="category-title">
          <a href="#"> Other </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 class="category-title">
          <a href="#">Contractor</a>
        </div>
        <div class="category-title">
          <a href="#">Customer Service</a>
        </div>
        <div class="category-title">
          <a href="#">Driver</a>
        </div>
        <div class="category-title">
          <a href="#">Food Restaurant</a>
        </div>
        <div class="category-title">
          <a href="#">General Labor</a>
        </div>
        <div class="category-title">
          <a href="#">Job Seeking</a>
        </div>
        <div class="category-title">
          <a href="#">Manufacturing</a>
        </div>
        <div class="category-title">
          <a href="#">Sales</a>
        </div>
        <div class="category-title">
          <a href="#">Software IT</a>
        </div>
        <div class="category-title">
          <a href="#">Other</a>
        </div>
      </div>
    </div>
  </body>
</html>

问题不在inline-block属性本身，而是布局结构和样式设置导致元素无法正常排列：

1. category-select是块级元素，会独占一行，导致子分类被迫从新行开始
2. 两个分类类都设置了10em的左内边距，占据大量水平空间，元素被迫换行
3. 缺少容器级的布局控制，元素排列无规则

修改后的CSS分类部分代码如下：

/*category section*/
.main-content h3 {
  margin-bottom: 20px;
  font-size: 2em;
  color: #333;
  text-align: center;
}

/* 每个分类组使用flex布局，允许换行 */
.group-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}

/* 主分类固定宽度，作为标题 */
.category-select {
  flex: 0 0 180px;
  font-weight: bold;
}

.category-select a {
  color: #27285f;
  font-size: 1em;
}

/* 子分类自适应宽度，设置间距 */
.category-title {
  margin: 5px 12px;
}

.category-title a {
  color: #333;
  font-size: 0.95em;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.category-title a:hover {
  background-color: #f0f0f0;
}

修改说明： #

• 给.group-select添加display:flex和flex-wrap:wrap，让内部元素可在一行排列，空间不足时自动换行
• 给.category-select设置固定宽度，确保主分类占据左侧固定区域，子分类在右侧排列
• 移除过大的左内边距，改用合理的margin控制元素间距
• 增加hover效果提升交互体验

修改后，分类模块会按主分类+子分类的结构逐行水平排列，空间不足时子分类自动换行，符合预期效果。

内容的提问来源于stack exchange，提问作者kevin