Why does Safari add a margin between my search input and button elements?

Question

I have a search bar that looks like this Search bar.

However, when I view my website in Safari, it looks like this: Broken search bar.

For some reason, there is a gap between my search icon and search input elements. I've tried disabling webkit styles using -webkit-appearance: none;, but it doesn't work. Here is my code:

body {
background-color: #000000
}

header {
  display: flex;
  justify-content: right;
  margin: 1rem;
}

#search {
  font-family: 'Montserrat', sans-serif;
  border: none;
  border-radius: 5px 0 0 5px;
  padding: 13px;
  background-color: rgba(255, 255, 255, 0.5);
  flex: 0.95;
  color: #ffffff;
  font-weight: bold;
}

#search::placeholder {
  color: #ffffff;
}

#search:focus {
  outline: none;
}

.search-container {
  display: flex;
  max-width: 350px;
  min-width: 350px;
}

.search-button {
  border: none;
  cursor: pointer;
  color: var(--dark-bg);
  background-color: #ffffff;
  border-radius: 0 5px 5px 0;
  font-size: 20px;
  padding: 0 13px;
  flex: 0.05;
}

input[type='search']::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type='search']::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  display: none;
}

input[type='search'],
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<header>
      <div class="search-container">
        <input
          type="search"
          id="search"
          name="search"
          placeholder="City Search"
          autocomplete="off"
        />
        <button type="submit" class="search-button">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </header>