跟随网页教程时padding未生效，布局与预期不符求助

你遇到的核心问题是选择器不匹配：

• HTML中容器的属性是id="container"
• CSS中你用的是类选择器.container，这无法选中ID为container的元素，所以padding样式根本没生效。

解决方法（二选一即可） #

方法1：修改CSS选择器为ID选择器 #

把CSS里的.container改成#container，这样就能正确匹配HTML中的容器元素：

#container {padding: 10px 10%;}

方法2：修改HTML的容器属性为class #

把HTML里的id="container"改成class="container"，保持CSS选择器不变：

<div id="header">
    <div class="container">
        <nav>
            <!-- 导航内容 -->
        </nav>
    </div>
</div>

另外，你代码里已经通过*选择器设置了box-sizing: border-box，这部分没问题，padding不会额外撑开容器宽度，修改后导航元素会按预期向右偏移。

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