Extend background-color of header beyond container with css

The accepted answer seems to rely on a fixed height, which I find rare in these days of responsive sites, so building on top of the answer given by Stephen Ostermiller (thanks!) The following code worked for me and surrounds objects of a dynamic height:

.container{
  background-color:#000;
  padding-bottom:30px;
}
.stripe {
  background-color:#000;
  position: relative;
  display: grid;
}
.stripe:before {
  content:"";
  background-color:#000;
  position: absolute;
  height: 100%;
  width: 200vw;
  left: -100vw;
  z-index: -1;
}

You can use the :before pseudo element with absolute positioning and negative z-index to extend the background color of a contained div the entire way to the edge of the page.

#container {
    width: 100px;
    margin: 0 auto;
    background-color: #FFFFCC;
}
.stripe {
    background-color:#CCFFFF;
    height: 100px;
    position: relative;
}
.stripe:before {
    content:"";
    background-color:#CCFFFF;
    position: absolute;
    height: 100%;
    width: 4000px;
    left: -2000px;
    z-index: -1;
}

<div id="container">
  <div>one</div>
  <div class="stripe">two</div>
  <div>three</div>
</div>