HTML Auto Complete Box откладывает все на странице, я хочу, чтобы она плавала на отдельном уровне

Question

Здесь находится файл json, в нижней части я выводю HTML

const search = document.getElementById('wiki-search-input');
const matchList = document.getElementById('match-list');
let breaches;


   const getBreachSearch = async (searchText) =>{
    let matches = [];
    if (searchText.length === 0) {
        matches = [];
        matchList.innerHTML = '';
    } else{
    url = '/searchq=' + searchText
    const res = await fetch(url);
    breaches = await res.json();
    matches = breaches.filter(breaches => {
        const regex = new RegExp(`^${searchText}`, 'gi');
        return breaches.Name_of_Covered_Entity.match(regex) || breaches.Industry.match(regex) || breaches.Type_of_Breach.match(regex); 
       });

       // Clear when input or matches are empty
       if (searchText.length === 0) {
        matches = [];
        matchList.innerHTML = '';
       }
    }

       outputHtml(matches);
      };

const outputHtml = matches => {
 if (matches.length > 0) {
  const html = matches
   .map(
    match => `<div class="card card-body mb-1 w-50">
    <h5>${match.Name_of_Covered_Entity}
   </div>`
   )
   .join('');
  matchList.innerHTML = html;
 }
};

search.addEventListener('input', () => getBreachSearch(search.value));

Далее идет файл CSS, здесь стиль для моего автозаполнения box

body {
  font: 16px Arial;  
}

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}

input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

autocomplete
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

наконец, вот часть html, где она реализована

<div class="home">
      <div class="container">
        <div class="row">
          <div class="eight columns offset-by-two">
            <h1 class="headline">Security Breaches Search Engine</h1>
          </div>
        </div>
        <div class="row">
          <div class="eight columns offset-by-two">
            <form pattern="[a-zA-Z ]+"
              onsubmit="window.location.href = '/search='+document.getElementById('wiki-search-input').value"
              method="get" class="wiki-search-form">
                <input type="search" placeholder="Search a breach" class="wiki-search-input" id="wiki-search-input">
                <div class="autocomplete" align="center" id="match-list">
              </div>
            </form>
            <button class="button btn btn-outline-success my-2 my-sm-0"
              onclick="window.location.href = '/search='+document.getElementById('wiki-search-input').value">Search</button>
            <div class="row">
              <div class="eight columns offset-by-two">
              </div>
              <div class="container">
                <div class="row mt-5">
                  <div class="row mt-5">
                    <h4>Here Are Some Popularly Searched Terms: </h4>
                  </div>
                </div>
                <div class="row mt-3">
                  <button class="button btn-success btn-wiki"
                    onclick="window.location.href = '/search='+'hospital'">Hospital</button> &nbsp;<br><br /> <br />
                  <button class="button btn-success btn-wiki"
                    onclick="window.location.href = '/search='+'hacking'">Hacking</button> &nbsp;<br><br /> <br />
                  <button class="button btn-success btn-wiki"
                    onclick="window.location.href = '/search='+'Insurance'">Insurance</button> &nbsp;<br><br /> <br />
                  <button class="button btn-success btn-wiki"
                    onclick="window.location.href = '/search='+'University'">University</button> &nbsp;<br><br /> <br />
                  <button class="button btn-success btn-wiki"
                    onclick="window.location.href = '/search='+'Government'">Government</button> &nbsp;<br><br /> <br />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

В основном, когда я запускаю На странице, файл js создает поля, которые появляются и ссылаются на API бэкенда и правильно возвращают правильные связанные данные ... У меня проблема в том, что карты создали pu sh все на странице! Я не возражаю отказаться от этих карточек из-за простого выпадающего списка, который всплывает над остальным содержимым над ним, но не знаю, как это сделать go. У кого-нибудь есть какие-либо предложения? спасибо!