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

Saved my life! Thank you man!

Thanks man!!!

If you don't want the horizontal scrollbar and you don't mind voodoo, try this:

.row-full {
width: 99.225vw;
position: relative;
margin-left: -49.59vw;
left: 50%;
}

It is a beautiful solution, but it is not responsive. :(
Any suggestions for responsivity?

In your picture above. Did you mean for the green lines to be 'vw' not 'vh' ?

MAN! I just created an account to comment on this. I struggled for hours with this and this solution is super elegant!
It's specially helpful for wordpress sites for example, when you need to override the container in the post/product page.

THANKS!!

It's great, thank you!

This is great, thanks for sharing this tip it really helped me :D

@FalseMcFakeman If you don't want the horizontal scrollbar then you set the box-sizing of the full-width container to border-box. What you have done there is not an advisable solution. Most people just use the following now by default on every project instead because border-box is a much easier way of thinking about sizes.

*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

The inner div .row-full only really needs the width set explicitly if another style effecting it sets it explicitly at something other than 100vw, or if it has had its display value changed from block. An element with the display value of block will automatically take up the most space it possibly can, and when you changed the position value to relative you took it out of the normal document flow and its maximum value became 100vw automatically. In your example you can the width: 100vw; line out totally and it will look the same in all cases.

@stephenirving the problem with horizontal scrollbar has nothing to do with the box sizing model but with the way current desktop browsers handle viewport messurements. They are simply unaware of the vertical scroll bar so the 100vw generates content under the vertical scrollbar if ir's present, triggering the horizontal one. To fix it you have to substract bar's width from the 100vw. The problem is that scollbars are similar but not the same on all browsers, so you have to substract a more or less safe width or use javascript to calculate the real scrollbar width and substract it on the fly.
Mi pure CSS solution was to add:
@media screen and (min-width:700px){
.row-full{
width: calc(100vw - 8.1px);
}
}
because the scrollbar issue is not present on mobile browsers where scrollbars do not take visual space.

Thank you! Helped a lot

It solved my problem, thank you!

I simply use this rules for .row-full and it seems all works:

margin-left: calc((100vw - 100%) / -2);
width: 100vw;