Теги и не соответствуют 100% высоты

У меня есть приложение, которое требует, чтобы я использовал CSS, чтобы установить высоту тегов и на 100%, например(Версия JSFiddle):

html, body {
  display: block;
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

body {
  background-color: #141414;
  overflow-x: hidden;
  overflow-y: auto;
}

Я включил весь CSS, который стилизует эти теги. Тем не менее, у меня всегда есть полоса прокрутки, которая позволяет мне прокручивать примерно на 20 пикселей вниз, независимо от того, насколько большим или маленьким является содержимое страницы. Эта проблема также сохраняется на осыпях любого размера.

Я вижу, почему на этих скриншотах. Обратите внимание, что у тела есть идентификатор #container, но он просто используется для таргетинга JS,не стиль CSS:

Трехмерная перспектива той же страницы, показывающая, что тег сдвинут вниз от верхней части тега :

. Поскольку у меня нет полей или отступов ни для одного из этих тегов, и поскольку ни у одного из HTML-элементов в верхней части страницы нет полей или отступов, чтобы протолкнуть тег вниз, я действительно застрял.

Как я могу исправить CSS так, чтобы тег был на одном уровне с верхней частью страницы?

Спасибо за ваше время.