为什么html {font-size：1rem;创建1px右边框？

Question

我正在使用Bootstrap4。我有一个导航栏等。

在学习媒体查询时，我发现了一个CSS规则，对于稍微减小整体字体大小很有帮助...

html {
  font-size: 0.9rem;
}

麻烦的是，当我这样做时，似乎在整个页面上都引入了1px的右边框/空白。

在this animated .gif中，您应该看到font-size: 1rem;处的正常大小（无边框）与重新加载时在font-size: 0.9rem;处出现的边框之间的差异。

要清楚-加载时边框不会立即显示；我需要向右窥视以显示它。而且，当我这样做时，它仍然可见。

这是正常行为吗？ 有解决方法吗？

更新：

我应该发布一些代码-https://jsfiddle.net/iamrobertandrews/aq9Laaew/266266/

Answer 1

更改页脚元素p-4中的类，而不是p-3，请参见下面的代码-

<footer class="container-fluid bg-dark text-white p-4">

</footer>