导航栏Logo与菜单内边距设置异常，菜单右侧被遮挡求助

问题根源 #

你给导航栏设置了position: fixed + width: 100%，同时添加了左右各50px的padding。默认CSS盒模型中，元素的padding是额外计算在宽度之外的，这就导致导航栏实际宽度变成了100% + 100px，超出了视口范围，右侧菜单因此被截断。另外，<ul>标签自带默认的内边距和外边距，也会挤压菜单空间，加重布局问题。

修复方案 #

方案1：使用border-box盒模型（推荐） #

给导航栏添加box-sizing: border-box，让padding包含在设置的宽度内部，不会超出视口：

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.navigation {
  position: fixed;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 50px;
  padding-left: 50px;
  height: 100px;
  box-sizing: border-box; /* 关键：让padding算在宽度内 */
}

/* 修正ul默认样式，让菜单横向排列 */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px; /* 菜单项之间的间距 */
}

方案2：改用auto宽度+左右定位 #

去掉width: 100%，改用left: 0和right: 0让fixed元素自动撑满视口，padding不会导致宽度溢出：

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.navigation {
  position: fixed;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 50px;
  padding-left: 50px;
  height: 100px;
  left: 0; /* 左对齐视口 */
  right: 0; /* 右对齐视口 */
}

/* 同样修正ul默认样式 */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

补充说明 #

如果是普通HTML项目，注意把HTML里的className改成class；React项目则无需修改。按上述方案调整后，菜单会正常显示在右侧，不会被截断。

内容的提问来源于stack exchange，提问作者Digvijay Singh Thakur