Unwanted border around absolute div's in div-container - html

Question

I've created a large div-container that can contain multiple items (div's),
like that:
But, as you can see, there is an unwanted white gap at the bottom and to the right of each item and I don't know where this is coming from.
The items should be scrollable if they not fit into the Container (horizontally)
HTML:
<div class="maincontainer">
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="box2">
</div>
</div>
</div>
CSS:
.maincontainer {
width: 90%;
min-height: 200px;
margin: auto;
border: 1px solid black;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
background-color: #444444;
margin: 0;
padding: 0;
}
.box{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:100px;
width:180px;
background-color:#666666;
}
.box2{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:80px;
width:160px;
background-color:#fff;
}
I've also made a Plunker
Any help appreciated! Thanks

Answer 1

I found a solution. Setting the maincontainer's font size to 0 does it! Googled removing whitespaces in css and found:
this

Answer 2

By default, your divs are block elements, however, you changed them to inline elements. Inline elements have a whitespace. That is why there is a gap between your two elements.
You can change the maincontainer display to flex like so:
.maincontainer {
width: 90%;
display:flex;
min-height: 200px;
margin: auto;
border: 1px solid black;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
.container {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
background-color: #444444;
margin: 0;
padding: 0;
}
.box{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:100px;
width:180px;
background-color:#666666;
}
.box2{
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0;
margin:auto;
height:80px;
width:160px;
background-color:#fff;
}
That should be it! :)