导航栏在某些页面无法正常显示，通常是因为 CSS 中 .logo 的 padding 属性使用了 padding: 0 100px（左右内边距），导致右侧菜单被整体挤出视口；只需将 padding: 0 100px 改为 padding-left: 100px 即可修复。
导航栏在某些页面无法正常显示，通常是因为 css 中 `.logo` 的 `padding` 属性使用了 `padding: 0 100px`（左右内边距），导致右侧菜单被整体挤出视口；只需将 `padding: 0 100px` 改为 `padding-left: 100px` 即可修复。
在对比两份 HTML 代码后可以发现：导航栏结构完全一致，问题根源不在 HTML，而在于 CSS 的布局计算逻辑。关键线索隐藏在 style.css 中的这段规则：
.logo {
color: rgb(175, 213, 252);
font-size: 35px;
line-height: 80px;
padding: 0 100px; /* ❌ 问题所在：右侧 100px 内边距会挤压右侧浮动菜单空间 */
font-weight: bold;
}该声明中 padding: 0 100px 表示：上下内边距为 0，左右内边距均为 100px。由于 .logo 元素位于
✅ 正确做法是仅保留左侧留白，移除对右侧布局的干扰：
.logo {
color: rgb(175, 213, 252);
font-size: 35px;
line-height: 80px;
padding-left: 100px; /* ✅ 仅向左留白，不侵占右侧菜单空间 */
font-weight: bold;
}此外，建议同步优化以下细节以提升健壮性：
-
为 （防止高度塌陷）：
nav::after { content: ""; display: table; clear: both; } 避免内联样式污染结构：如
中的 style="max-width:90%" 应统一收归 CSS 类管理；
语义化修正：
... 不符合 HTML5 规范，本身已是语义化块级标题容器，无需额外包裹 ； 字体大小单位： 是已废弃标签，应改用 CSS font-size: 1.5rem 或类似响应式单位。
最后验证：修改后刷新页面，导航菜单将稳定显示于右上角，响应式折叠按钮（.checkbtn）在小屏下也能正常触发展开动画。这一问题本质是 CSS 盒模型与浮动布局的协同细节，对初学者而言极具代表性——精准控制 padding 方向，比盲目增加 !important 或调整 z-index 更根本、更可靠。
