Body height and width is 100vh; and the div in this has width 100vh or 100% but it is not touching the edge ?why

Question

I want to create div of width equal to view port of browser but it is not working when I apply width:100vh to the body, here is my coding

 body { font-family: Staatliches; font-size: 25px; overflow: hidden; margin: 0; height: 100vh; width: 100vh; }.bg { height: 100vh; /* width: 100%; */ width: 100vh; background-color: red; }

 <div class="bg"></div>

Answer 1

You need to add html { margin: 0; height: 100%; } html { margin: 0; height: 100%; }

Answer 2

just a silly mistake !!

u have used 100vh in width which mean the width of the div will be height of the view port but u want the div's width to be 100% of viewport so use 100vw instead of 100vh

1vh = 1 / 100 of viewport height

1vw = 1 / 100 of viewport width

 body { font-family: Staatliches; font-size: 25px; overflow: hidden; margin: 0; height: 100vh; width: 100vw; }.bg { height: 100vh; /* width: 100%; */ width: 100vw; background-color: red; }

 <div class="bg"></div>