随着页面宽度变窄，页面出现水平滚动条，body右侧出现空白边是为什么啊？

[三九四]

我是使用百分比布局的，想不断缩小屏幕宽度看效果（看它随页面宽度变化自动调整宽度的效果）。
页面有引用bootstrap。

现象：
页面最开始为1314px宽，没有水平滚动条，右边没有空白边。
页面在宽度为840左右出现水平滚动条，随着页面宽度不断减小，水平导航条可以拖动的部分越来越多，右侧空白边越来越宽。

我自己写属性，把bootstrap（bootstrap.min.css 第3版的）里的border-box覆盖掉了，我写的是
*{box-sizing：content-box；}
如果我把content-box去掉，使用border-box，那条白边就会消失。但我不知道为啥。

所以想求教一下，想知道空白边是由于什么造成的，它是一个什么部分?

[风中的少年]

受页面中元素影响，特别是用bootstrap, 看下源码，发现有很多写的是33.33333%, 或 66.6666%等 这样就造成了当页面屏幕越小，百分比将会有偏差。

[三九四]

谢谢。

你说的情况比如三列的像素宽是33.33333....%，浏览器四舍五入，边缘就有空白了。
看书上有看到如果用百分比设置宽度，就尽量使宽度刚好加起来100%而要少一些，也是浏览器四舍五入的道理。
但是我把html和body设置为width：100% ！important；也没有效果呀。

但我想到之前我的body背景色是白的，我换成红的，顺便给body加了4px的绿色边框试了一下。发现多出来像白边变红了，而且是在body边框之外。（content-box情况下）


border-box情况下，看到body和绿色边，没有滚动条。

请问如果是这样有什么解决办法吗？

[zhang1lang4]

为水平导航条设置min-width:840px