Search code examples
htmlcssdomwidth

Why there is a scroll on x-axis when width is 100vw?

I've Written that code and it was showing me a scrollbar on x-axis.

 nav{width:100vw;}

but when i switch the values from vw to % its just starts working fine.

then why is there a scroll with vw?

Solution

  • Because setting width to 100vw will give 100vw width to the element + any padding or margins which results in overflow

    100vw element = 100vw width + padding + margin

    which is not the case with 100%;

    100% element = 100% width inclusve of margin + padding

    Mostly the reason is body margin. So set body -> margin to 0 and see it working as 100%.