通过将页面结构语义化分离（如用 `

在网页布局中，

元素默认会继承视口宽度，但若直接对 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，仅靠语义化标记 + 精准作用域样式，即可优雅解耦全局与局部宽度控制。