Push element out of the container all the way to left side of screen

Issue

I have created a code and tried to move the green box to the left side of the screen. Vertically it needs to stay in the same position as the Heading text and needs to be the same height as the heading height. I have tried to implement this but it is not very responsive. Once you reduce the screen size, the green box is out of the screen completely and not visible.

*{
  margin:0;
  padding:0;
}

.container{
  border:1px solid red;
  margin:50px auto;
  width:500px;
  padding:10px;
}

h1{
  position: relative;
  &::before{
    content:"";
    display:block;
    top:0;
    bottom:0;
    left:-40px;
    background-color:green;
    position:absolute;
    width: 30px;
  }
}

<div class="container">
  <h1>Hello World! <br/>This is new line text</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, excepturi. Dolore ex ipsa vero tempora esse? Velit modi tempora quaerat.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque officia suscipit quos quam eius modi, vel placeat soluta autem? Unde delectus, fuga nesciunt labore quidem cum nostrum sed quae ea.</p>
</div>

Solution

You need to account for width of the parent and adjust for screen width using vw units.

*{
  margin:0;
  padding:0;
}

.container{
  border:1px solid red;
  margin:50px auto;
width: 500px;
  padding:10px;
}

h1{
  position: relative;
  &::before{
    content:"";
    display:block;
    top:0;
    bottom:0;
      left: calc((500px - 100vw)  / 2 ); /* width - screen width divided by 2 */
    background-color:green;
    position:absolute;
    width: 30px;
  }
}

<div class="container">
  <h1>Hello World! <br/>This is new line text</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, excepturi. Dolore ex ipsa vero tempora esse? Velit modi tempora quaerat.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque officia suscipit quos quam eius modi, vel placeat soluta autem? Unde delectus, fuga nesciunt labore quidem cum nostrum sed quae ea.</p>
</div>

Answered By - Paulie_D