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

 

    

    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.
    

     --- Full width container ---


 

    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.
    

CSS

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