如何让子DIV突破父容器延伸至上层祖先容器？

需要让蓝色的Header DIV延伸至Main DIV的左右边缘，但不能对position的static/relative属性做重大修改，尽可能少改动现有代码。之前尝试添加overflow: visible;并扩大width的方法无效，仅会使右侧溢出，左侧无法对齐。

现有代码片段：

.main {
   background-color: lightgray;
}

.gridcontainer {
  background-color: white;
  margin-left: 2rem;
  margin-right: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.header { /* 需要延伸至main的边缘，尽量少改代码 */
  background-color: darkblue;
  color: red;
}

<div class="body">
   <div class="main">
      <div class="gridcontainer">
         <div>
             <header class="header">
                 <h1>Main Header</h1>
                 <h3>Subheader</h3>
             </header>
             
             <form>
                Field1: <input type="text" /><br/>
                Field2: <input type="text" /><br/>
             </form>
         </div>
      </div>
   </div>
</div>

只需要修改.header的CSS样式，不用改动其他元素，也不会触碰position相关属性，具体代码如下：

.header { /* 需要延伸至main的边缘，尽量少改代码 */
  background-color: darkblue;
  color: red;
  margin-left: -4rem;
  margin-right: -4rem;
  width: calc(100% + 8rem);
}

原理说明 #

gridcontainer同时设置了2rem的左右外边距和2rem的左右内边距，总共让内部内容和main边缘隔了4rem的距离。给.header设置负的左右外边距（-4rem），就能让它向左右两侧分别延伸4rem，再用calc(100% + 8rem)把宽度拉满，刚好对齐main的左右边缘。下方的表单元素不会受影响，依然遵循gridcontainer的padding设置。

内容的提问来源于stack exchange，提问作者gene b.