Container容器的max-width在响应式布局中怎么失效了？

我用了一个Container组件，设置了max-width: 1200px，但在小屏设备上发现内容还是超出了屏幕宽度，滚动条都出来了。

明明写了媒体查询，也试过加width: 100%，但没用。是我写法有问题吗？相关代码如下：

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 12px;
  }
}