Q:

Why is there an extra space in table-cell div?

I am trying to figure out as to why there is an extra unwanted space in my layout, I have colored it red to identify the space that is to cease to exist.
What am I doing wrong?
Here is a picture:

Here is the HTML & CSS in question:

* {
  font-family: Segoe UI;
  font-size: 9pt;
}
body,
html {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  background: rgb(187, 195, 203);
}
#wrapper {
  width: 900px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgb(112, 112, 112);
}
#box3 {
  display: table;
  width: 100%;
  padding: 0;
  margin: 0;
}
#box1 {
  background: rgb(141, 155, 169);
  font-weight: bold;
  padding: 3px;
  color: #FFF;
}
#box2 {
  background: rgb(240, 240, 240);
  border-top: 1px solid rgb(180, 180, 180);
  border-bottom: 1px solid rgb(180, 180, 180);
  padding: 3px;
}
#box3 {
  display: table;
  width: 100%;
}
#box4 {
  border-left: 0;
  border-right: 0;
  border-top: 1px solid rgb(180, 180, 180);
  border-bottom: 1px solid rgb(180, 180, 180);
}
#box5 {
  background: rgb(240, 240, 240);
  padding: 5px;
  text-align: center;
}
#left {
  display: table-cell;
  width: 200px;
  height: 350px;
  background: #FFF;
  border-right: 1px solid rgb(180, 180, 180);
}
​​ #right {
  display: table-cell;
  width: auto;
}
/* CSS STYLING FOR THE FILE NUMBER & RECENT DROP DOWN SELECT */
.dropdown dd,
.dropdown ul {
  margin: 0px;
  padding: 0px;
}
.dropdown dd {
  position: relative;
}
.dropdown dt {
  border-top: 1px solid rgb(180, 180, 180);
  border-left: 1px solid rgb(180, 180, 180);
  border-right: 1px solid rgb(180, 180, 180);
  border-bottom: 1px solid rgb(180, 180, 180);
  width: 170px;
  position: relative;
  padding: 1px;
}
.dropdown dt:hover,
.dropdown dt:focus {
  color: #5d4617;
  border-color: rgb(180, 180, 180);
}
.dropdown dt input[type=text] {
  border: 0;
  width: 100%;
  box-sizing: border-box;
}
.dropdown dt input[type=button] {
  border: 0;
  width: 15px;
  height: 18px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 1px;
  right: 0;
}
.dropdown dd ul {
  border-left: 1px solid rgb(180, 180, 180);
  border-right: 1px solid rgb(180, 180, 180);
  border-bottom: 1px solid rgb(180, 180, 180);
  border-top: 0;
  display: none;
  left: 0px;
  padding: 1px;
  position: absolute;
  width: auto;
  min-width: 170px;
  list-style: none;
  cursor: pointer;
  background: #FFF;
}
.dropdown dd ul li {
  padding: 2px;
  display: block;
}
.dropdown dd ul li:hover {
  background-color: rgb(232, 232, 232);
  font-weight: bold;
}
#field_img {
  position: absolute;
  left: 0px;
  top: 2px;
}
.clear {
  clear: both;
}
<div id="wrapper">
  <div id="box1">App Title</div>
  <div id="box2">Search Bar</div>
  <div style=" border: 0; padding: 3px; text-align: center;">test</div>
  <div id="box3" style="background: red;">
    <div id="left">
      <div id="menu_wrapper">
        <ul id="menu">
          <li data-show="#1">File Information</li>
          <li data-show="#2">Comments</li>
        </ul>
      </div>
    </div>
    <div class="right" style="background: rgb(240,240,240); height: 350px;">
      <!-- CONTENT [TAB 1] -->
      <div id="1" class="hidden tab" style="width: 100%;">
        <form name="register">
          <fieldset>
            <legend>Member Registration</legend>
            <label>Username</label>
            <input type="text" name="name">
            <br />

            <label>E-Mail</label>
            <input type="text" name="email">
            <br />

            <label>Password</label>
            <input type="password" name="password">
            <br />

            <label>Confirm password</label>
            <input type="password" name="confirm_password">
            <br />

            <label>Comments (optional)</label>
            <textarea name="message" rows="5" cols="25"></textarea>
            <br />

            <label>&nbsp;</label>
            <input type="checkbox" name="i_agree" value="1">I agree to the terms & conditions
            <br />

          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <div id="box4">grid here</div>
  <div id="box5">buttons here</div>
</div>

A:

It's because of the default margin on the nested ul.menu element. Since you probably don't want to remove that, you could add vertical-align: top to the #left element. In doing so, the #right element's alignment will not correspond to the baseline of the aforementioned ul.menu element's text.
Working Example
#left {
  display: table-cell;
  vertical-align: top; /* Added.. */
  width: 200px;
  height: 350px;
  background: #FFF;
  border-right: 1px solid rgb(180, 180, 180);
}

