通过将页面结构语义化分离（如用 `
在网页布局中，
元素默认会继承视口宽度，但若直接对 body 设置 max-width，整个页面（包括导航栏）都会被约束——这显然违背了“导航栏需铺满全屏”的需求。正确的解法是结构先行、样式分离：利用 HTML5 语义化标签明确划分区域职责。首先，将导航栏（
nav {
width: 100%; /* 确保导航占满可用宽度 */
background: #333;
color: white;
}
main {
max-width: 1024px; /* 主体内容最大宽度 */
margin: 0 auto; /* 水平居中，两侧留白 */
padding: 2rem;
}对应 HTML 结构应清晰分层：
全宽导航 + 限定主体 欢迎来到我的网站
此处内容将严格限制在 1024px 内，无论屏幕多宽，文字和布局均保持舒适阅读宽度。
⚠️ 注意事项：
- 避免对 或 html> 设置 max-width，否则会影响所有子元素；
- 若导航含内边距（padding）或外边距（margin），需配合 box-sizing: border-box 防止意外溢出；
- 响应式场景下，建议为 main 添加断点（如 @media (max-width: 768px) { main { max-width: 100%; } }），确保小屏友好；
- 语义化标签（
总结：布局自由度源于结构合理性。不依赖 hack 或 !important，仅靠语义化标记 + 精准作用域样式，即可优雅解耦全局与局部宽度控制。
