CSS: How to create a full-width container within a fixed main container?

The title may sound a bit confusing, but in the end it is about a problem that can occur from time to time. You need a full width container exactly at the place where a parent container is located, whose width is much smaller.

Solution: With the following code snippet this problem can be solved.

<div class="container">
<div class="row-full">--- Full width container ---</div>
</div>

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