Here I have two divs inside another div, the only problem is the white gap that is created between them.

.box{
  width: 400px;
  height: 400px;
  border: 5px solid black;
  margin: 20px auto;
}

.it1,.it2{
    width: 200px;
    height: 200px;
}

.it1{
    background-color: aqua;
}

.it2{
    background-color: brown;
}

<div >
    <div ></div>
    <div ></div>
</div>

Maybe I'm just being picky or it could even be my OCD but I really need to know if I'm just doing something wrong. I could make the boarder bigger but that is just feels like a workaround.

CodePudding user response：

Just add it in your code:

.box {
   display: flex;
}

CodePudding user response：

The problem comes down to inconsistancies between browsers, my browser scaling was set to 150% soo make sure to fiddle arround with that aswell. Ctrl middle mouse button.