Why is there an unexplainable gap between these inline-block div elements? [duplicate]

Answer 1

You need to add

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}

because whenever you write display:inline-block it takes an additional margin-right:4px. So, you need to remove it.