css做完后打开网页变宽了

最近我在写网页的时候使用了CSS进行布局，但是在打开网页的时候发现页面变宽了，让我非常困扰。经过一番排查，我终于找到了原因。

/* CSS 代码 */
body {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

首先，我们来看一下我的CSS代码。我使用了盒模型布局，所以把body的margin和padding都设为0。然后，我创建了一个名为container的div，用来包含网页的主要内容。我把容器的宽度设置为100%，而最大宽度设置为960px，这样当浏览器窗口变小的时候，网页就会自适应缩小。同时，我也设置了容器的margin为0 auto，这样可以让容器居中显示。

然而，当我打开网页的时候，页面却变宽了。经过一番研究，我发现问题出在了我的CSS代码中。

/* 错误的CSS代码 */
.container {
  width: 960px;
  margin: 0 auto;
}

我把容器的宽度改为了960px，这样网页在打开的时候就会以960px的宽度显示。但是，当浏览器窗口变小的时候，容器就会超出浏览器边界，从而造成了网页变宽的问题。

我的教训就是，一定要灵活运用CSS，适应不同的浏览器和设备，以确保网页的正常呈现。