Как блок внутри контейнера вытнуть в левую часть страницы

window.addEventListener('load', ()=>{ 
    const div = document.querySelector('.need-block'); 
    let margin = div.getBoundingClientRect().left; 
    div.style.marginLeft = `-${margin}px`; 
    div.style.width = `100vw`; 
});

.main-block{ 
  height: 500px; 
  width: 300px; 
  background-color:red; 
} 
 
.some-block{ 
  height: 100px; 
  background-color:yellow; 
} 
 
.need-block{ 
  height: 100px; 
  background-color:green; 
  width: 100vw   
}

<div class="main-block"> 
  <div class="some-block"></div> 
  <div class="need-block"></div> 
  <div class="some-block"></div> 
</div>

.main-block { 
  height: 500px; 
  width: 300px; 
  margin: 0 auto; 
  background-color: red; 
} 
 
.some-block { 
  height: 100px; 
  background-color: yellow; 
} 
 
.need-block { 
  height: 100px; 
  background-color: green; 
  width: 100vw; 
  position: absolute; 
  left: 0; 
}

<div class="main-block"> 
  <div class="some-block"></div> 
  <div class="need-block"></div> 
  <div class="some-block"></div> 
</div>