d3_dx

Вот накидал пример на canvas.

$('div.box').each(function(i,elem) {
  $(elem).text(i+1);
});

.box {
    &::before, &::after {
        width: 100px;
        height: 100px;
    }
}

a {
  position: relative;
}
a:before {
  content: '';
  position: absolute;
	background: rgba(0,0,0,.6);
  opacity: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
a:hover:before {
  opacity: 1;
}

.row {
  counter-reset: list -1;
}

.row a::before {
  content: counter(list);
  counter-increment: list;
}

.row a:first-child::before,
.row a:last-child::before {
  content: "";
}

https://jsfiddle.net/Ltgybcq3/1/

или

.row {
  counter-reset: list 0;
}

.row a:not(:first-child, :last-child)::before {
  content: counter(list);
  counter-increment: list;
}

https://jsfiddle.net/Ltgybcq3/2/

С inline-block между элементами ставится "пробел", поэтому в вашем случае div просто не влезает в ширину контейнера.

Поставьте контейнеру font-size: 0, а в дочерних элементах верните размер шрифта на место, и все будет ок.

UPD:
Кроме того, нужно добавить вот это:

#container img {
    vertical-align: top;
 }

Вот полный код CSS (html из вопроса):

body {
      background: #e5e9ff;
    }
    
    #container {
      width: 687px;
      height: 394px;
      background: #f4f5fa;
      font-size: 0;
    }
    
    #container img {
      width: 369px;
      height: 394px;
      vertical-align: top;
    }
    
    #container .right {
      background: #777;
      width: 318px;
      height: 394px;
      display: inline-block;
      font-size: 14px;
    }

родителю написать : display:flex; align-items:center;