поле справа: авто и поле слева: авто не работает

Question

Я пытаюсь выровнять таблицу по горизонтали, но это кажется невозможным. Я сделал это раньше без проблем, но я не знаю, почему это не работает сейчас. Таблица просто остается на том же месте.

<div class="SearchBox">
      <div id="map"></div>
      <form action="{{ url_for('search') }}" method="post" class="DestinationSearch" id="search">
        <i class='fas fa-arrow-left arrow' id="arrow" onclick="location.href='http://127.0.0.1:5000/Drunkfy/Home'"></i>
        <i class='fas fa-car car'></i>
        <i class='fas fa-house-user house'></i>
        <i class='fas fa-long-arrow-alt-down vertical' style='font-size:24px'></i>
        <input type="text" id="origin-input" class="boxes"  placeholder="Pickup Location" value="Current location" title="Choose your pickup location"><br><br>
        <input type="text" id="destination-input" class="boxes" placeholder="Destination" title="Choose your destination"><br><br>
        <button type="submit" disabled style="display: none" aria-hidden="true"></button>
        <input id="searchbtn" type="submit" value="Search">
      </form>
        <table id="DriversAvailable">
             <tr>
                 <th></th>
             </tr>
             <tr id="cars">
                <td>hh</td>
             </tr>
        </table>
    </div>

И это css:

.DestinationSearch {
      position:relative;
      text-align: center;
      box-sizing: border-box;
      border: 1px solid #ccc;
      padding-top: 20px;
      background-color: rgb(70, 144, 255);
      font-size: 16px;
      height: 25%;
      width: 100%;
    }
#map {
  position:absolute;
  top:180px;
  height: 76%;
  width: 100%;
  margin:0;
}

table {
      display:block;
      width:100%
      border-collapse: collapse;
      margin-left:auto;
      margin-right:auto;
      text-align: center;
    }

Спасибо за вашу помощь

Answer 1

Вам просто нужно удалить display: block; из таблицы класса.