How can I make a div take the full width of the page when it is inside another div that have 90% width

Answer 1

You can position the child relative and left: 50% and then translate it by -50% in the x-axis to re-align it with the edge of the screen. This works because left: 50% is half of the parent width while the transform: translateX(-50%) is half of the element itself. This relies on the original container being centered so may not work for all cases.

.container {
  background: gray;
  width: 80%;
  margin: auto;
}

.child {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: red;
}

  
Centered
  
Something
  
Centered
  
Centered
  
Centered