Unexpected 1px-2px "margin" appears between parent and child

Question

I have a navigation bar which is a red div, containing two ul, on left and right side respectively. Margins and paddings of both parent and children are declared 0 but there are still 1px-2px red gaps appeared around the two children.

I have checked the Developer Tools, heights of children match the parent div. I don't know why top and bottom gaps can still exist. In addition, red gap does also appear on the left to the left ul and right to the right ul.

The existence of gaps is dependent to the screen size. While I control the width of Developer Tools, they keep appearing and disappearing respectively. Perhaps it's issue of the browser? I'm using Chrome. How to solve this?

Here is the code

html {
  height: 100%;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 800px) {
  html {
    font-size: 17px;
  }
}

@media screen and (min-width: 896px) {
  html {
    font-size: 18px;
  }
}

@media screen and (min-width: 960px) {
  html {
    font-size: 19px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 20px;
  }
}

@media screen and (min-width: 1152px) {
  html {
    font-size: 21px;
  }
}

@media screen and (min-width: 1280px) {
  html {
    font-size: 22px;
  }
}

@media screen and (min-width: 1366px) {
  html {
    font-size: 23px;
  }
}

@media screen and (min-width: 1600px) {
  html {
    font-size: 24px;
  }
}
table {
    width: 100%;
    background-color: #dddddd;
    filter: alpha(opacity=40);
    opacity: 0.95;
    border: 15px ridge;
    border-radius: 20px;
    border-collapse: separate!important;
    overflow: hidden;
}


.navbar {
  margin: 0;
  padding: 0!important;
  border: 5px outset;
  background-color: #e74c3c;
}

.navbar-left {
  float: left;
}

.navbar-right {
  float: right;
}

.myName {
    background-color: #666666;
}
.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.navbar ul li {
  float: left;
}

.navbar ul li a {
  display: flex;
  align-items: center;
  height: 2.5rem;
  padding: 0.75rem 1rem;
  color: white;
  text-align: center;
  text-decoration: none;
}

ul {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

.navbar ul li a:hover:not(.active) {background-color: #111;}

.navbar ul li a.active {background-color: #4bf5c9;}

.navbar ul li a.active:hover {background-color: #32a386;}

.navbar ul li.right {float: right;}

.icon {
    height: 1rem;
    margin: auto 10px auto 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<table>
  <tbody>
    <tr>
      <td>
        <div class="navbar">
          <ul class="nav navbar-left">
            <li><a class="active" href="menu.aspx">Menu</a></li>
          </ul>
          <ul class="nav navbar-right">
            <li>
              <a class="myName"><img src="img/user-24.ico" class="icon" />Usernme</a>
            </li>
            <li>
              <a href="login.aspx"><img src="img/logout-24.ico" class="icon" />Logout</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>