How to create full width (100% ) container inside fixed width container

Some times we need to add a full-width container (which spans 100% of the window) inside a container which has a fixed width and aligned center.

Following code helps to achieve the layout.

HTML

[php]<div class="container" style="width: 750px; margin: 0 auto;">
<div class="row-full">
— Full width container —
</div>
</div>[/php]

CSS

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

How it works

CSS units vw (viewport width) is used here. IE9 above has support for vw & vh css units.

The solution found here.