html - 为什么这个页面比显示器宽？

Question

我在个人网站上工作时遇到了一个问题:在使用 CSS 和容器使我的列表居中后，页面比显示器宽，导致出现水平滚动条。为什么是这样？相关代码:

HTML:

<h2>My Stack:</h2>
<div class="list">
<ul class="list-unstyled">
    <li>Vim</li>
    <li>Git</li>
    <li>Zsh</li>
    <li>Byobu</li>
</ul>
</div>

CSS:

body {
    margin: 0 2em 0 2em;
    font-size: 18px;
    width: 100%;
}
h1, h2, h3, h4, h5, h6, h7 {
    text-align: center;
}
p, div.list{
    text-align: center;
}
ul {
    display: inline-block;
}

实时复制:https://www.k7dxs.xyz/linux.php

理论上，导航栏应该压缩，文本应该换行，对吧？为什么它不起作用？

Answer 1

因为主体上有 2em 边距，为了弥补这一点，您可以使用 width: calc()，这将设置 100% 宽度减去 4em体边距。

参见 fiddle :https://jsfiddle.net/5wwg1q5j/55/

body {
    margin: 0 2em 0 2em;
    font-size: 18px;
    width: calc(100% - 4em);
}