Блок выходящий за пределы родителя

*{ 
  box-sizing:border-box; 
} 
body{ 
  margin:0; 
} 
.container{ 
  padding-top:50px; 
  max-width:800px; 
  margin:auto; 
  position:relative; 
} 
.progress{ 
  border:1px solid; 
  width:150%;    
  max-width:100vw; /*Ограничиваем ширину прогресс-бара шириной экрана*/ 
  height:30px; 
  background-color:#ddd; 
  position:absolute; 
  top:10px;   
  left:50%; /*смещаем прогресс-бар влево на 50% ширины родителя*/ 
  transform:translateX(-50%); /*смещаем прогресс-бар вправо на 50% своей ширины, тем самым центрируя его относительно родителя*/ 
} 
.progress__bar{ 
  width:50%; 
  height:100%; 
  background-color:#cda; 
}

<div class="container"> 
  <div class="progress"> 
    <div class="progress__bar"></div> 
  </div> 
  <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p> 
</div>

*{ 
  box-sizing:border-box; 
} 
.progress{ 
  max-width:1600px; 
  margin:0 auto 10px; 
  height:30px; 
  background-color:#ddd; 
  border:1px solid; 
} 
.progress__bar{ 
  height:100%; 
  width:50%; 
  background-color:#cda; 
} 
.container{ 
  max-width:800px; 
  margin:auto; 
}

<div class="progress"> 
  <div class="progress__bar"></div> 
</div> 
<div class="container">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</div>