当您在导航栏的搜索框中键入内容时，搜索框会更改位置

Question

这是一段关于它的外观的视频视频 我试着把它改正，但我做不到。我很困扰。据我所知，当电影名称出现在屏幕上时，搜索按钮位于导航栏上方。我玩过 css 文件，但它并没有为我解决问题。所以如果你现在为什么会这样，请给我反馈。

导航栏.jsx

<div className={styles.container}>
            <div className={styles.logo}>
                <Link reloadDocument className="btn btn-primary" style={linkStyle} to="/" >Home</Link>
            </div>

            <div className={styles.search}>

                <div className={styles.searchInputs}>
                    <input ref={searchBoxInput} onKeyDown={handleKeyPress} value={searchQuery} onChange={handleChange} className={styles.searchBoxInput} placeholder="Search a movie" />
                    <button onClick={handleClick} className={styles.searchButton} >Search</button>
                </div>
                {movies?.length > 0 ?
                    (
                        <div className={styles.queryResultContainer}>
                            {movies?.map(movie => {
                                return <div><p>{movie.original_title}</p></div>
                            })}
                        </div>
                    ) : null
                }
            </div>

            <div className={styles.menu}>
                {!loggedIn && (
                    <>
                        <div className={styles.authButton}>
                            <Link reloadDocument className="btn btn-primary" style={linkStyle} to="/login" >Login</Link>
                        </div>
                        <div className={styles.authButton}>
                            <Link reloadDocument className={"btn btn-primary"} style={linkStyle} to="/signup" >Sign Up</Link>
                        </div>
                    </>
                )}

                {loggedIn && (
                    <>
                        <div className={styles.authButton + " " + styles.profileBtn}>
                            <Link reloadDocument className="btn btn-light" style={linkStyle} to="/profile" >Profile</Link>
                        </div>
                    </>
                )}
            </div>

        </div>

CSS文件

.container {
    height: 70px;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: white;
    margin-left: 20px;
}

.searchInputs {
    color: white;
}

.searchBoxInput {
    border-radius: 20px;
    text-align: center;
    height: 35px;
    width: 400px;
    border: none;
    outline: none;
}

.searchButton {
    padding: 7px 10px;
    margin-left: 10px;
    border-radius: 10px;
    background-color: rgb(241, 248, 23);
    color:black;
    font-weight: bold;
    transition: 0.3s;
    
}

.searchButton:hover {
    background-color: black;
    color: white;
}

.menu {
    color: white;
    margin-right: 20px;
    display: flex;
}

.authButton {
    padding: 10px;
}

.profileBtn {
    color: black;
}