CSS- Creating full width (100% ) container inside fixed width container.

Question: How can we create full   width (100% ) container inside fixed width container with CSS?
 
Answer: Some times we need to add a full width containers (which spans 100% of window) inside a container which has a fixed width and aligned center.

Like below screenshot-

HTML

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class="container" style="width: 750px; margin: 0 auto;">     <p>     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.     </p> <div class="row-full">      --- Full width container --- </div>    <p>     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.     </p>   </div>

CSS

?

1 2 3 4 5 6 7 8

.row-full{  width: 100vw;  position: relative;  margin-left: -50vw;  height: 100px;  left: 50%;  background-color:red; }