So if I am correct, 1vw represents 1/100th of the width of a viewport, meaning there are 100vw across any given viewport. But here's an interesting scenario - when I have two divs each with a width of 25vw, one positioned 25vw from the right edge and the other 25vw from the left edge, they end up overlapping significantly. What's intriguing is that this behavior is consistent across different browsers. Why do you think this happens?
#sign_up_button{
position: fixed;
padding: none;
top: 68vh;
right: 25vw;
width: 25vw;
border: solid;
}
#login_button{
position: fixed;
top: 68vh;
left: 25vw;
width: 25vw;
border: solid;
}<div id="sign_up_button">Test</div>
<div id="login_button">Test</div>