HTML + CSS высота / поля / граница / отступы не складываются

Приветствую, Stackoverflow!

У меня проблемы с точной настройкой тегов. Вот код: https://codepen.io/anon/pen/NLbyag

Моя цель - сделать так, чтобы мои теги <svg> и <table id = "time-h-axis"> прокручивались по горизонтали внутри их родителя <div id = "main-charts">, но не по вертикали. <svg> и <table id = "time-h-axis"> имеют высоту 330 и 70, что составляет высоту 400 пикселей для <div id = "main-charts">.

Однако есть несколько дополнительных вертикальных пикселей, поступающих откуда-то (можно прокрутить вертикально и увидеть немного светло-зеленого цвета div в коде) ... У меня закончились идеи ... Нужна помощь! Спасибо ;-)

HTML:

<div id = "main-charts">            
  <table id = "time-h-axis"><tr></tr></table>
  <svg height = "330" width = "11970"></svg>
</div>

CSS:

#main-charts {
  width:1000px;
  height: 400px;
  background-color: lightgreen;
  margin: 0px;
  border: 0px;
  padding: 0px;
  overflow: scroll;

}

#time-h-axis {
  border-spacing: 0px;
  width: 11970px;
  height: 70px;
  background-color: violet;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#main-charts svg {
  background-color: red;
  margin: 0px;
  border: 0px;
  padding: 0px;
}