html - ツリー ビュー構造 CSS ノードの位置の問題

Question

CSS:-

body {
  font-family: Calibri, Segoe, "Segoe UI", "Gill Sans", "Gill Sans MT",
    sans-serif;
}

/* It's supposed to look like a tree diagram */
.tree,
.tree ul,
.tree li {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.tree {
  margin: 0 0 1em;
  text-align: center;
}
.tree,
.tree ul {
  display: table;
}
.tree ul {
  width: 100%;
}
.tree li {
  display: table-cell;
  padding: 0.5em 0;
  vertical-align: top;
}
/* _________ */
.tree li:before {
  outline: solid 1px #666;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.tree li:first-child:before {
  left: 50%;
}
.tree li:last-child:before {
  right: 50%;
}

.tree code,
.tree span {
  border: solid 0.1em #666;
  border-radius: 0.2em;
  display: inline-block;
  margin: 0 0.2em 0.5em;
  padding: 0.2em 0.5em;
  position: relative;
}
/* If the tree represents DOM structure */
.tree code {
  font-family: monaco, Consolas, "Lucida Console", monospace;
}

/* | */
.tree ul:before,
.tree code:before,
.tree span:before {
  outline: solid 1px #666;
  content: "";
  height: 0.5em;
  left: 50%;
  position: absolute;
}
.tree ul:before {
  top: -0.5em;
}
.tree code:before,
.tree span:before {
  top: -0.55em;
}

/* The root node doesn't connect upwards */
.tree > li {
  margin-top: 0;
}
.tree > li:before,
.tree > li:after,
.tree > li > code:before,
.tree > li > span:before {
  outline: none;
}

このリンクサンプルを見つけてください。

私はCSSが初めてです。

下の画像の CSS は、下に表示されている画像の上記のサンプル リンクに記載されています。

私の問題は、「ボディ」セルと「ヘッド」セルが「html」セルから等距離にある必要があることです。

現在、'body' セルは 'html' セルに近くなっています。

CSS コードで何を変更すればよいですか?

画像をご覧ください