尽管我使用了“ margin：0 auto”，但右侧的部分仍多了10px

Question

我页面上的section应位于页面中间。 这里的代码如果section ：

section{
margin: 0 auto;
margin-top: 100px;
margin-bottom: 50px;
width: 1000px;

但该部分的右侧增加了10px。 如果更改页面的大小，则可以更好地看到它：

希望您能看到我的问题并能对我有所帮助。 告诉我是否要在这里写入整个CSS文件。

Answer 1

您的商品标签正在容器中溢出。 由于边框的缘故，其宽度最终为300px + 4px + 4px。 如果将box-sizing设置为border-box ，width将正确说明border：

article {
  width: 1000px;
  border: 4px solid rgb(25, 25, 25);
  background-color: rgb(75, 75, 75);
  float: left;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
  box-sizing:border-box;
}

许多框架（例如Twitter Bootstrap）都可以进行*{box-sizing:border-box;}因为它更加直观。

编辑：

请注意，虽然此解决方案是一种常见的模式，但是在现有页面中更改box-sizing可能会弹出其他内容，特别是因为您一直在使用px宽度而不是基于百分比的宽度。 您可能只想在该section执行width:308px可以防止其他问题。

我建议border-box更健壮，但这取决于您。