Problème de placement

Bonjour,

voici mon problème :

J'aimerai qu'un élément qui est placé dans plusieurs container (dans l'exemple le container-3) fasse 100vw et qu'il s'étende de gauche à droite de l'écran sans sortir du flux.

J'imagine que la solution se trouve avecune position relative les margin-left, left, translateX(). Mais après de multiples tentatives, je n'arrive pas au comportement voulu !

Donc si quelqu'un a une idée, je suis preneur. :)

<div class="container-1">
  <div class="container-2">
    <div class="sub-container-1"></div>
    <div class="sub-container-2">
      <div class="container-3"></div>
    </div>
  </div>
</div>

.container-1 {
  display: block;
  margin: auto;
  padding: 4vw;
  background: red;
  height: 2000px;
}

.container-2 {
  display: flex;
  margin: auto;
  max-width: 1240px;
  width: 92%;
  background: blue;
  padding-left: 20px;
    padding-right: 20px;
  height: 1000px;
}

@media (min-width: 768px) {
.container-2 {
    padding-left: 0;
    padding-right: 0;
}

.container-2 .sub-container-1 {
  width: 30%;
  margin-right: 5%;
  background: green;
  height: 500px;
}

.container-2 .sub-container-2 {
  width: 65%;
  display: block;
  background: green;
  height: 800px;
}

.container-3 {
  position: relative;
  width: 100vw;
  background: yellow;
  /* margin-left: calc (100% + );
    left: ;
transform: translateX();*/
  height: 500px;
}

Merci par avance pour vos retour.

Bonne journée