调整内容属性在display:flex中不起作用

Question

下面是我的css和html代码，我努力使justify-content: space-between;但不工作类.container我不能删除max-width很重要,有什么解决方案解决这个问题我也使用flex:auto , flex:0 0 auto收缩或给可调空间元素但没有适合我

任何帮助都是非常感谢的

.mega-wrap {
position: relative;
margin: 35px auto;
overflow: hidden;
}
.mega-wrap .container {
display: flex;
align-items: center;
justify-content: space-between;
align-content: center;
margin: 0 auto;
}
.container {
width: 100%;
max-width: 1145px;
margin: 0 auto;
padding: 0px;
box-sizing: border-box;
}
.dual-wrapper,
.max-wrapper {
position: relative;
display: block;
background: red;
color: #fff;
width: 50%;
overflow: hidden;
margin: 0 auto;
}

<div class="mega-wrap">
<div class="container">
<div class="dual-wrapper">
Example 1
</div>
<div class="max-wrapper">
Example 2
</div>
</div>
</div>

Answer 1

为了避免混淆，我删除了所有的CSS代码，并尝试与您想要的匹配。

.container {
background: red;
color: white;
display: flex;
justify-content: center;
}

.dual-wrapper, .max-wrapper {
display: inline-block;
padding-left: 1rem;
padding-right: 1rem;
}

<div class="container">
<div class="dual-wrapper">
Example 1
</div>
<div class="max-wrapper">
Example 2
</div>
</div>