将HTML元素居中，尽管已达到外部容器的最大宽度

得到了一个场景，其中最大宽度被设置为1248px-然而，当屏幕宽度超过此值时，右侧会出现空白（此时宽度大于1248px）-我可以进行哪些更改，以便无论宽度（即使大于最大宽度）如何，我的内容器都保持水平居中？我已经创造了一个小小提琴来说明我的问题！提前谢谢

<div class="wrapping-container">
  <div class="container">
    <div class="login">Login</div>
  </div>
</div>


.wrapping-container {
    width: 1248px;
    max-width: 1248px;
}

.container {
    max-width: 350px;
  margin: 30px auto;
   background-color: grey;
}

.login {
      width: 100%;
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
    background-color: teal;
}

登录
.包装容器{
宽度：1248px；
最大宽度：1248px；
}
.集装箱{
最大宽度：350px；
保证金：30像素自动；
背景颜色：灰色；
}
.登录{
宽度：100%；
右边填充：24px；
左侧填充：24px；
右边距：自动；
左边距：自动；
背景色：青色；
}

您必须将包装容器的宽度设置为100%。检查下面的代码段：

。包装容器{
宽度：100%；
最大宽度：1248px；
背景：红色；
保证金：0自动；
}
.集装箱{
最大宽度：350px；
保证金：30像素自动；
背景颜色：灰色；
}
.登录{
宽度：100%；
右边填充：24px；
左侧填充：24px；
右边距：自动；
左边距：自动；
背景色：青色；
文本对齐：居中；
}

登录

您可以尝试以下方法之一

。包装容器{
宽度：1248px；
最大宽度：1248px；
右边距：自动；
左边距：auto；/*这两个属性只会使容器水平居中*/
}
.包装容器{
宽度：1248px；
最大宽度：1248px；
margin:auto；/*但在某些情况下，它也会尝试垂直居中对齐*/
}

对于您现有的代码，

包装容器

元素的宽度始终为1248px，而不管窗口或屏幕大小-使用这两种宽度是没有意义的

宽度：1248px和
最大宽度：1248px-
宽度：1248px
在所有情况下固定宽度

您可以做的（这是常见的做法）是将
宽度设置为100%，并使
最大宽度为1248px。这样，内容将集中在较小的屏幕上（现在不是），一旦窗口（或容器元素？）变得比1248px宽，内容将集中在
包装容器内，然后保持在1248px


。包装容器{
宽度：100%；
最大宽度：1248px；
}
.集装箱{
最大宽度：350px；
保证金：30像素自动；
背景颜色：灰色；
}
.登录{
宽度：100%；
右边填充：24px；
左侧填充：24px；
右边距：自动；
左边距：自动；
背景色：青色；
}

登录
为响应喝彩-但如果屏幕宽度超过1248px，这仍然无助于解决问题。不用担心，但您希望容器在1248px之后居中，不是吗？