CSS - make algolia autocomplete input wide as the input group

Question

I have a navbar built with Bootstrap v.4 and I have an algolia autocomplete search form in it.

<div class="container">
  <nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
      <div class="menu-button">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>

      <a href="{{ url('/') }}" class="logo-link">
        <img src="{{ asset('/img/logo-small-new.png') }}" alt="logo">
      </a>
      <div class="navbar-collapse collapse justify-content-between" id="navbar5">
          <form action="/search" method="get" class="my-auto d-inline mx-auto col-md-8" role="search">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">
                  <button type="submit" class="search-button">
                    <i class="ion-ios-search-strong"></i>
                  </button>
                </span>
                <input type="text" id="search-input" name="q" class="form-control aa-input-search" placeholder="Search for players and videos ..."  value="{{ Request::get('q') }}" aria-describedby="basic-addon1">
              </div>
          </form>
          <ul class="navbar-nav my-auto">
              @if (Auth::check())
              <li class="nav-item dropdown">
                  <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="ion-ios-gear-outline"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="{{ url('/home') }}">Admin dashboard</a>
                      <a class="dropdown-item" href="{{ url('/logout') }}"
                          onclick="event.preventDefault();
                                   document.getElementById('logout-form').submit();">
                          Log out
                      </a>
                      <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
                          {{ csrf_field() }}
                      </form>
                  </div>
              </li>
              @else
              <li>
                <a href="{{ url('/login') }}" class="btn btn-outline-info">Sign in</a>
              </li>
              @endif
          </ul>
      </div>
  </nav>
</div>

The problem I have is that I have set the width of the search bar to a fixed width, in order to have the search form input visible, but then it doesn't look good on small screens, because it is not taking the same width as the parent element input group. This is the css:

.navbar {
  background: $white;
  .navbar-toggler {
    border: 0;
  }
  .btn {
    font-size: 14px;
  }

  .search-button {
    background: transparent;
    border: 0;
  }


  input {
    border: 0;
  }
  i {
    color: $green;
    font-size: 20px;
  }
  .input-group-addon {
    background: $white;
    border: 0;
    padding: 0;
  }
  @media (max-width: 767px) {
    input  {
      border-bottom: 1px solid $green;
    }
  }


  .aa-input-container {
    display: inline-block;
    position: relative; }
  .aa-input-search {
    width: 300px;
    padding: 12px 28px 12px 12px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }
  .aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
    display: none;
  }
  .input-group .form-control {
    width: 300px;
  }
}

Not sure how can I fix that so that I have the input same width as the input group. Here is the example of my case:

You can see by the border that the input is wider than the input group. How can I fix that?