CSS - 将algolia自动完成输入作为输入组

Question

我有一个使用Bootstrap v.4构建的导航栏，我有一个algolia自动填充搜索表单。

<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>

我遇到的问题是我将搜索栏的宽度设置为固定宽度，以使搜索表单输入可见，但是在小屏幕上看起来不太好，因为它没有采取与父元素input group的宽度相同。这是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;
  }
}

不确定如何解决这个问题，以便输入的输入宽度与输入组相同。以下是我的案例：

您可以通过边框看到输入比输入组宽。我该如何解决这个问题？