Css Flex：水平超出屏幕

一切都很好，但我希望它是一个较小的屏幕中心对齐，它得到了中心对齐，但也有一个屏幕以外的空间出现

代码：

。示例{
线高：30px；
背景色：#363636；
颜色：#ffffff；
身高：353px；
填充：26px0；
}
.示例链接{
宽度：960px；
保证金：0自动；
字体大小：12px；
显示：-webkit flex；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
调整内容：灵活启动；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
}
.示例-1{
高度：55px；
左边距：3倍；
填充：0 69px 0 0；
位置：相对位置；
}
.示例2{
文本转换：大写；
-moz列数：2；
-webkit列数：2；
列数：2；
-moz柱间距：52px；
-webkit柱间隙：52px；
柱间距：52px；
填充：0 20px 0 0；
利润率：0.44px；
位置：相对位置；
}
.示例网络{
-moz列数：2；
-webkit列数：2；
列数：2；
左边距：74px；
-moz柱间距：52px；
-webkit柱间隙：52px；
柱间距：83px；
}
@仅介质屏幕和（最大宽度：960像素）{
.示例链接{
-webkit柔性方向：柱反向；
弯曲方向：柱反向；
-webkit对齐项目：居中；
对齐项目：居中；
证明内容：之间的空间；
对齐内容：居中对齐；
柔性包装：包装；
边缘底部：30px；
}
.示例-1{
高度：自动；
保证金：0；
填充：0；
位置：相对位置；
边缘底部：30px；
}
.示例2{
文本转换：大写；
-moz列数：2；
-webkit列数：2；
列数：2；
-moz柱间距：52px；
-webkit柱间隙：52px；
柱间距：52px；
填充：0；
保证金：0；
位置：相对位置；
边缘底部：30px；
}
.示例3{
边缘底部：30px；
文本转换：大写；
-moz列数：2；
-webkit列数：2；
列数：2；
左边距：0；
-moz柱间距：52px；
-webkit柱间隙：52px；
柱间距：83px；
}
}

同侧眼睑
同侧眼睑


同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑


同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑

它工作正常。只需修改class

。示例链接

css使用了

max width

而不是

width

，如下所示：

.example-links {
  max-width: 960px;
  width:100%;
}

。示例{
线高：30px；
背景色：#363636；
颜色：#ffffff；
身高：353px；
填充：26px0；
}
.示例链接{
最大宽度：960像素；
宽度：100%；
保证金：0自动；
字体大小：12px；
显示：-webkit flex；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
调整内容：灵活启动；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
}
.示例-1{
高度：55px；
左边距：3倍；
填充：0 69px 0 0；
位置：相对位置；
}
.示例2{
文本转换：大写；
-moz列数：2；
-webkit列数：2；
列数：2；
-moz柱间距：52px；
-webkit柱间隙：52px；
柱间距：52px；
填充：0 20px 0 0；
利润率：0.44px；
位置：相对位置；
}
.示例网络{
-moz列数：2；
-webkit列数：2；
列数：2；
左边距：74px；
-moz柱间距：52px；
-webkit柱间隙：52px；
柱间距：83px；
}
@仅介质屏幕和（最大宽度：960像素）{
.示例链接{
-webkit柔性方向：柱反向；
弯曲方向：柱反向；
-webkit对齐项目：居中；
对齐项目：居中；
证明内容：之间的空间；
对齐内容：居中对齐；
柔性包装：包装；
边缘底部：30px；
}
.示例-1{
高度：自动；
保证金：0；
填充：0；
位置：相对位置；
边缘底部：30px；
}
.示例2{
文本转换：大写；
-moz列数：2；
-webkit列数：2；
列数：2；
-moz柱间距：52px；
-webkit柱间隙：52px；
柱间距：52px；
填充：0；
保证金：0；
位置：相对位置；
边缘底部：30px；
}
.示例3{
边缘底部：30px；
文本转换：大写；
-moz列数：2；
-webkit列数：2；
列数：2；
左边距：0；
-moz柱间距：52px；
-webkit柱间隙：52px；
柱间距：83px；
}
}

同侧眼睑
同侧眼睑


同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑


同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑

对不起，我正在尝试添加代码，但它说有太多的程序无法帮助您：）