Why are two divs overlapping each other? I have divided the two divs equally with viewport width. When I set the width to 49% instead of 50%, the code works fine. Why is that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.fity{
width: 50vw;
height: 100vh;
float: left;
}
</style>
</head>
<body>
<div class="fity" style="background:red;"></div>
<div class="fity" style="background:blue;"></div>
</body>
</html>