Changing browser affects width of a class

Question

Problem

I have a functional search bar that works on Firefox. However, when I tried to run this on Microsoft Edge, it broke the search bar.

On Firefox, it is inline with the browser:

On Edge, it overextends over the search:

I have tried to change the width (changed to 100% and rem), max-width, and padding. However, none of these worked.

Code Snippet

#potentialSearchResults {
  display: none;
  top: 0px;
  font-family: Roboto !important;
  width: 255px !important;
  font-size: 20px;
  position: relative;
  background-color: var(--background-colour);
  border-bottom: solid var(--main-colour);
  border-left: solid var(--main-colour);
  border-right: solid var(--main-colour);
}

#searchBarForm {
  overflow: visible !important;
  /* overflow: hidden; */
  z-index: 100;
  /* height: 47px; */
}

<div class="search-container">
  <form action="" id="searchBarForm">
    <input type="text" placeholder="Search..." name="search" id="searchInput">
    <button type="submit" id="searchSubmit" aria-label="submit search" onclick="searchSb()"><i class="fa fa-search"></i></button>
  </form>
  <table id="potentialSearchResults">
    <thead>
      <tr id="tableHeader" aria-label="date and event search results">
        <th> Date </th>
        <th> Event </th>
      </tr>
    </thead>
    <tbody><!-- searchBar.js adds rows here based on the search input --></tbody>
  </table>
</div>

I don't know what a possible solution would be. Thanks in advance.