我剛剛按照Youtube上的一個教程創建了這個搜索欄，但是在輸入和表單元素本身之間存在著巨大的差距。這很奇怪，但我似乎無法解決這個問題。我在CSS中交叉檢查了類名及其引用，似乎search__input是需要一些工作來消除搜索欄中的空白的元素。

問題

我意識到這是代碼中某處的CSS問題，為了便于檢查，我在下面加入了代碼。我希望來自這里的React專家可以幫助我解決這個簡單的問題。提前感謝！

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"
import "./SearchBar.css"

const SearchBar = ({ posts, setSearchResults }) => {
    const handleSubmit = (e) => e.preventDefault()

    const handleSearchChange = (e) => {
        if (!e.target.value) return setSearchResults(posts)

        const resultsArray = posts.filter(post => post.title.includes(e.target.value) || post.body.includes(e.target.value))

        setSearchResults(resultsArray)
    }

    return (
        <header>
            <form className="searchbar" onSubmit={handleSubmit}>
                <input
                    className="search__input"
                    type="text"
                    id="search"
                    onChange={handleSearchChange}
                />
                <button className="search__button">
                    <FontAwesomeIcon icon={faMagnifyingGlass} />
                </button>
            </form>
        </header>
    )
}
export default SearchBar

@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input,
button {
  font: inherit;
}

html {
  font-size: 1rem;
}

body {
  background-color: #000;
  font-family: 'Nunito', sans-serif;
}

p {
  color: whitesmoke;
  margin-top: 0.5em;
}

article {
  margin: 1em;
  padding: 1em;
  background-color: midnightblue;
  color: whitesmoke;
  border-radius: 15px;
}

img {
  border-radius: 15px;
  display: block;
}

header {
  background-color: gold;
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.searchbar {
  width: 95%;
  border: 2px solid #000;
  border-radius: 2em;
  overflow: hidden;
  font-size: 1rem;
  display: flex;
  flex-flow: row nowrap;
}

.searchbar:focus-within {
  box-shadow: 2px 2px 5px #000;
}

.search__button,
.search__input {
  background-color: #fff;
  border: none;
  outline: none;
}

.search__input {
  /* padding: 1em; */
  width: 85%;
}

.search__button {
  width: 15%;
  font-size: 1.5rem;
  padding-right: 0.5em;
  color: gray;
  display: grid;
  place-content: center;
}
}