Przerwa między znacznikiem tabeli oraz listy

Witam,
piszę stronę internetową w formie nauki i nie mogę sobie poradzić z jedną rzeczą. Mianowicie, jak widać na załączonym obrazku, między zdjęciami (które są zrobione w tabeli), a menu nawigacyjnym (lista) jest malutka przerwa. Próbowałem wielu sposobów i żaden nie przyniósł oczekiwanego rezultatu.

Kod HTML:

  <header>
    <table id="logo-table">
      <tr>
        <td><img src="images/logo.png" id="logo"></td>
        <td><img src="images/logodwa.jfif" id="logo2"></td>
      </tr>
    </table>
  </header>
  <nav class="navigation-bar">
    <ul>
      <li>Strona główna</li>
      <li>Wydarzenia</li>
      <li>Kontakt</li>
      <li>O nas</li>
    </ul>
  </nav>

Kod CSS:

/* loga */
#logo-table {
  border-spacing: 0;
  border: 0;
}
#logo-table tr, td {
  padding: 0px;
}
#logo {
  margin-top: 70px;
  margin-left: 100px;
  display: block;
}
#logo2 {
  height: 295px;
  width: 1000px;
  display: block;
  margin-top: 72px;
}

/* Menu */
.navigation-bar ul {
  list-style-type: none;
  padding: 0;
  margin-top: 0;
  margin-left: 100px;
  margin-right: 100px;
  float: top;
  overflow: hidden;
  background-color: black;
}
.navigation-bar ul li {
  float: left;
  display: block;
  border-right: green 2px solid;
  padding: 8px;
  color: white;
}

a co pokazuje Ci konsola developerska (f12)? Do "kogo" lub czego nalezy ta przerwa?

dlaczego tabele a nie flex lub grid?

Trudno ocenić, nie widząc całego kodu i nie wiedząc, jakie są faktyczne rozmiary zdjęć (bo np. dla #logo nie definiujesz w css wysokości).

@fasadin:
Grid obił mi się o uszy, ale nie sądziłem, że jest taki ważny. Pouczę się Bootstrapa i spróbuję rozwiązać swój problem.

@Freja Draco:
Nie definiowałem wysokości, ponieważ #logo posiadał domyślną, która mi odpowiadała.