Remove bottom gap in bootstrap column

Question

My concern is my middle col-md-4, there is an annoying margin in the bottom. I tried disabling some CSS in the inspect element but it still stays. How can I center my search bar?

Here is my bootstrap:

<div class="container mb-3 mt-3">
  <div class="row align-self-center">
    <div class="col-md-4">
      <img src="img/logo_header.png" class="img-fluid" width="200">
    </div>
    <div class="col-md-4">
      <form action="cards/search.php" method="POST">
        <div class="input-group">
          <input type="text" name="text-search" id="searchBox" class="form-control search-bar" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="Search Coupons" required>
          <div class="input-group-prepend">
            <button type="submit" name="submit-search" class="input-group-text bg-blue"> <i class="fas fa-search"></i> </button>
          </div>
        </div>
        <div id="response" class="scrollbar-design search-content"></div>
      </form>
    </div>
    <div class="col-md-4">
      <img src="img/logo_header.png" class="img-fluid" width="200">
    </div>
  </div>
</div>

UPDATE:

padding 0px does not seem to work

Answer 1

just add my-auto since it's bootstrap

<div class="col-md-4 mx-auto text-center my-auto">
</div>