बूस्ट्रैप पतन में ड्रॉपडाउन के बाहर जा रहा खोज बार

मुझे वास्तव में दो समस्याएं हैं जिनके लिए मुझे सहायता चाहिए:

1. छोटी स्क्रीन पर खोज बार किसी कारण से नेवबार के ढहने से बाहर हो जाता है और मैं इसका पता नहीं लगा सकता।

2. ऐसा लगता है कि Awesomplete.js या CSS खोज बार की चौड़ाई को ओवरराइड कर रहा है और इसे बाईं ओर धकेल रहा है, मैं भी अनिश्चित हूं कि क्यों।

अगर कोई इसमें सुधार करना चाहता है तो यहां jsfiddle है: https://jsfiddle.net/x4vusam1/

    .bg-steel {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#09c6f9+0,045de9+100 */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e3b70+0,29539b+100 */
  background: purple;
}

.navbar-brand {
  color: white !important;
}

.btn {
  background-color: transparent !important;
}

.navbar-collapse {
  position: relative;
  padding-top: 20px !important;
  max-height: 400px;
}

.navbar-collapse form[role="search"] {
  position: absolute;
  right: 0;
  padding: 0;
  margin: 0;
  z-index: 9;
}

.navbar-collapse form[role="search"] button,
.navbar-collapse form[role="search"] input {
  padding: 8px 12px;
  border-width: 0;
  box-shadow: none;
  outline: none;
}

.navbar-collapse form[role="search"] input {
  padding: 16px 12px;
  font-size: 14pt;
  font-style: italic;
  color: rgb(160, 160, 160);
  box-shadow: none;
}

.navbar-collapse form[role="search"] button[type="reset"] {
  display: none;
}

@media (min-width: 768px) {
  .navbar-collapse {
    padding-top: 0 !important;
    padding-right: 38px !important;
  }
  .navbar-collapse form[role="search"] {
    width: 38px;
  }
  .navbar-collapse form[role="search"] input {
    font-size: 15pt;
    opacity: 0;
    display: none;
  }
  .navbar-collapse form[role="search"].active {
    width: 100% !important;
  }
  .navbar-collapse form[role="search"].active button,
  .navbar-collapse form[role="search"].active input {
    display: table-cell;
    opacity: 1;
  }
}




.awesomplete [hidden] {
    display: none;
}

.awesomplete .visually-hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.awesomplete {
    display: inline-block;
    position: relative;
}

.awesomplete > input {
    display: block;
}