移动端导航栏无法居中求助：右侧偏移且样式异常

问题核心是你给.navbar设置的固定百分比左右边距在移动端失效了，再加上width: fit-content的宽度收缩，导致导航栏无法和上方元素对齐。

修复方案一：用auto边距实现自适应居中 #

直接替换掉原来的margin-left:43%; margin-right:43%;，改用margin: 0 auto;让浏览器自动计算左右边距，保证任何屏幕下都能水平居中：

.navbar {
  padding: 1px 2px;
  border: 4px double;
  /* 关键：用auto边距替代固定百分比 */
  margin: 0 auto;
  /* 限制最大宽度，避免桌面端导航栏过宽 */
  max-width: fit-content;
  border-radius: 8px;
  background-color: rgba(19, 19, 22, 0.7);
  border-color: white;
}

.navbar ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
  margin: 3px 13px;
}

@media (max-width: 500px) {
  .navbar {
    width: fit-content;
    /* 如果希望导航栏占满屏幕宽度但内容居中，可替换成：
    width: 100%;
    padding: 1px 10px;
    box-sizing: border-box; */
  }
}

修复方案二：用Flex布局实现更可控的居中 #

如果你想用Flex布局，直接给.navbar开启Flex，配合margin:0 auto控制容器居中，同时可以给内部ul也用Flex来更灵活控制导航项：

.navbar {
  padding: 1px 2px;
  border: 4px double;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: fit-content;
  border-radius: 8px;
  background-color: rgba(19, 19, 22, 0.7);
  border-color: white;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* 用gap替代li的左右margin，更直观控制间距 */
  gap: 26px;
}

.navbar li {
  margin: 3px 0;
}

@media (max-width: 500px) {
  .navbar {
    width: fit-content;
  }
  .navbar ul {
    /* 移动端内容过多时自动换行 */
    flex-wrap: wrap;
    gap: 10px;
  }
}

为什么原来的方法失效？ #

原来的margin-left:43%和margin-right:43%是基于父容器宽度的固定比例，当屏幕缩小后，这个比例对应的像素空间和导航栏实际宽度不匹配，再加上width:fit-content让导航栏宽度收缩，就会出现向右偏移的情况。而margin:0 auto是让浏览器自动分配左右边距，确保元素始终在父容器水平中心位置，适配所有屏幕尺寸。

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