Prevent 100vw from creating horizontal scroll

Question

If an element is set to width: 100vw; and there is a vertical scrollbar the width of the element will be equal to the viewport plus the width of the scrollbar.<

Answer 1

An element with width: 100vw only causes horizontal scrollbars when one of it's parents has a horizontal padding. Otherwise it should fit in well.

Check this fiddle: http://jsfiddle.net/1jh1cybc/ The .parent2 has a padding, which causes the inner .box to break out of it's parent width.

Edit:

In your case I guess your body has a margin. Check this fiddle out with you code and try to remove the body css rule: http://jsfiddle.net/1jh1cybc/1/