边框弄乱了 HTML 宽度

Question

这里是 HTML/CSS 新手。

试图将我在 Codeacademy 上学到的知识付诸实践，但我遇到了一个问题，即我设置为 width:100% 的 header 最终离开了页面。我相信这是因为边框，因为当我将它设置为 1px 而不是 10px 时，它几乎适合页面。

我附上了几个屏幕截图和我的代码，我确信有一个非常简单的解决方案，虽然我并不大惊小怪我是否有边框，但我需要了解为什么会这样。

提前致谢。

#header {
height: 100px;
width: 100%;
margin: auto;
background-color: white;
border: 10px solid black;
font-size: 80px;
text-align: center;
font-family: Helvetica, Ariel, Sans;

.left {
height:400px;
width:100px;
background-color:white;
border:10px solid black;
float:left;

.right {
height: 400px;
width: 100px;
background-color: white;
border: 10px solid black;
float: right;

图片:http://postimg.org/image/b0vnu2okf/

Answer 1

你可以使用 box-sizing: border-box计算框的宽度和高度，包括填充和边框。

此外，您可以在所有内容上使用 * { box-sizing: border-box } 。根据 Paul Irish 的建议.