Html 如何创建此布局？子项比父项/填充项/flexbox宽？

我相信这很简单，但我正在努力让我的头围绕它

我有两个div。标题div最大宽度为500px。主分区最大宽度为400px。主div应在浏览器窗口中水平居中。标题div的左边缘需要与主div的左边缘对齐。请参见下文。红线是浏览器窗口的中心：

我已经通过添加一个最大宽度为500px的粉色包装div并在左侧使用额外的填充物实现了这一点。这在一定程度上有效。但在较小的屏幕尺寸下，左侧的额外填充会使布局偏离中心

那么我如何创建这个布局呢？我假设我不能将heading div添加为main div的子级，因为子级不能比其父级宽。我想flexbox可能是答案，但我从未使用过flexbox

这是我目前掌握的代码：

但在较小的屏幕尺寸下，左侧的额外填充会使布局偏离中心

可以使用calc函数计算这些视口大小的正确填充量

低于600px的视口宽度，剩余空间为100%减去400px，我们需要其中的一半用于左侧填充，因此：

身体{ 保证金：0； } .包装纸{ 最大宽度：500px； 保证金：0自动； 填充：0 100px； 背景颜色：浅粉色； } @介质最大宽度：600px{ .包装纸{ 左侧填充：calc100%-400px/2； } } .标题{ 最大宽度：500px； 背景色：青色； 高度：100px； } 主要{ 最大宽度：400px； 背景颜色：灰色； 高度：500px； }

---

@misorude如果子元素的最大宽度大于父元素，则它不起作用。只有“宽度”似乎起作用。我不想要固定的宽度。非常感谢。这是一个绝妙的解决方案

 <div class="wrapper">
    <div class="heading"></div>
    <main></main>   
</div>


.wrapper {
    max-width:500px;
    margin:0 auto; 
    padding:0 0 0 100px;
    background-color:lightpink;
    }

.heading {
    max-width:500px;
    background-color:cyan;
    height:100px;
    }


main {
    max-width:400px;
    background-color:grey;
    height:500px;
    }