Full-width child in container parent

How make a full-width container inside a limited-width parent?

<!-- Parent -->
<div class="container">

  <p>Title</p>

  <!-- This div we want to be full width -->
  <div class="full-width">
    <img src="full-width-img.jpg" alt="">
  </div>

</div>

Solution:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

The idea here is: push the container to the exact middle of the browser window with left: 50%; and then pull it back to the left edge with negative margin -50vw.