网站按钮屏幕居中对齐问题求助（HTML/CSS新手）

问题原因 #

当前代码中.row元素未设置宽度，仅适配内容宽度，导致justify-content: center属性无法发挥作用，最终按钮偏向右侧排列。

修改步骤 #

只需调整CSS样式，确保容器占满可用宽度并正确应用flex居中规则：

• 给.container添加宽度和间距样式，与导航栏分隔开
• 给.row设置100%宽度，保证居中属性生效
• 简化冗余的flex配置，用gap统一控制按钮间距

修改后的CSS代码片段 #

/* 新增.container样式 */
.container {
  width: 100%;
  margin-top: 40px; /* 与导航栏的间距，可按需调整 */
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%; /* 占满父容器宽度，让居中设置生效 */
}

.row ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px; /* 统一控制按钮之间的间距，替代原有margin */
  padding: 0;
  margin: 0;
}

/* 删除冗余的flex-direction: row，flex子元素默认即为横向排列 */
.row li {
  display: flex;
  list-style-type: none;
  border-radius: 10px;
}

效果说明 #

修改后，.container占满屏幕宽度，.row通过justify-content: center让内部的按钮列表居中，列表再通过同样的属性让按钮横向居中排列，同时保留了按钮在屏幕宽度不足时自动换行的特性，且不会影响导航栏的布局。

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