Remove margin from bootsrap grid column inside listed card

body {
  font-family: 'Catamaran', sans-serif;
  letter-spacing: 1px;
}

.hotel-li {
  margin: 0;
}

.hotel-header {
  margin-bottom: 0;
}

.hotel-desc {
  margin-bottom: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w-75 mx-auto card bg-dark text-white">
  <div class="card-header text-center border-white">Hotels</div>
  <ul class="list-group list-group-flush">
    <li class="hotel-li d-flex align-items-center list-group-item bg-dark border-white"> <!-- d-flex to convert it into flexbox container, align-items-center to align the items vertically -->
      <div class="col-6">
        <h3 class="hotel-header">hotell</h3>
        <p class="hotel-desc">dfsfdsfdsfdsfdsfdsfds</p>
      </div>
      <div class="col-6 d-flex justify-content-end"><button class="btn btn-outline-light mx-2">Edit</button><button class="btn btn-outline-danger">Delete</button></div> <!-- justify-content-end to move the content to the end horizontally -->
    </li>
    <li class="hotel-li d-flex align-items-center list-group-item bg-dark border-white">
      <div class="col-6">
        <h3 class="hotel-header">hotel 2</h3>
        <p class="hotel-desc">random text</p>
      </div>
      <div class="col-6 d-flex justify-content-end"><button class="btn btn-outline-light mx-2">Edit</button><button class="btn btn-outline-danger">Delete</button></div>
    </li>
  </ul>
</div>