给所有盒子设置box-sizing: border-box;

box-sizing: border-box; 是一种CSS属性，用于设置盒子的尺寸计算方式。当设置为border-box时，元素的宽度和高度将包括其边框和内边距，而不会被内容所撑开。

在默认的盒模型中，元素的宽度和高度只包括内容的宽度和高度，而边框和内边距会增加元素的总尺寸。这意味着如果给一个元素设置了固定的宽度和内边距，那么实际显示的宽度会比设置的宽度更宽。

通过设置box-sizing: border-box;，可以改变盒模型的计算方式，使得元素的宽度和高度包括了边框和内边距。这样一来，设置固定宽度和内边距时，元素的实际显示宽度就会与设置的宽度一致。

使用box-sizing: border-box; 可以简化布局计算，特别是在响应式设计中非常有用。它可以确保元素的尺寸在不同屏幕尺寸下保持一致，减少调整布局时的麻烦。