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?
2 Answers
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%.
% is relative to the parent element. So 100% will take the 100% area of the parent element.
But vw is relative to the viewport directly. Viewport is the visible area of a web page. 100vw is taking the entire viewport width available.
Related