为什么我的<nav>出现多余宽度？CSS布局问题求助

问题根源：

• nav使用固定宽度1536px+inline-block，同时ul设置100vw-40px，两个宽度规则冲突，超出视口范围
• 默认box-sizing: content-box下，元素的padding会额外撑开宽度，导致整体布局溢出
• body设置width:100vw会包含浏览器滚动条宽度，直接触发横向滚动

解决步骤： #

1. 全局统一盒模型：给所有元素设置box-sizing: border-box，让padding和border包含在元素宽度内，避免额外撑开
2. 修正body样式：去掉width:100vw，块级元素body默认会占满视口宽度，加了反而会引发滚动条问题
3. 重置nav布局：
   • 去掉固定宽度1536px，改成width:100%让它自适应视口
   • 把display: inline-block改成display: block，避免行内块元素的空白间隙和宽度计算问题
4. 调整ul宽度：去掉calc(100vw - 40px)，改成width:100%，继承nav的内容宽度（已自动减去nav的padding）

修改后的完整代码： #

CSS代码

@font-face {
    font-family: "Nunito";
    src: url("nunito-regular.woff2") format('woff2');
    font-display: swap;
}

/* 全局盒模型重置 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Nunito, sans-serif;
    background-color: #93bafa;
}

nav {
    background-color: #ffffff;
    display: block;
    width: 100%;
    padding: 20px;
}

nav h1, nav p {
    display: block;
}

nav ul {
    list-style: none;
    text-align: center;
    width: 100%;
}

nav ul li {
    display: inline-block;
    /* 可选：添加间隙让导航项更美观 */
    margin: 0 15px;
}

h1, p {
    margin-block: 0px;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="global.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TGS Yoyos</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><h1>Te Du</h1><p>Freelancer for yoyo design</p></li>
        <li>Home</li>
        <li>Recent Projects</li>
        <li>About me</li>
        <li>Hire me</li>
      </ul>
    </nav>
    <h1>Featured Projects</h1>
    <!-- <img src="" alt=""> -->
  </body>
</html>

修改后，nav会自适应视口宽度，ul完全在nav内部，不会出现横向滚动条，布局也更适配不同屏幕尺寸。

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