该搜索栏如何填充可用空间

Question

我在reactjs中使用react-autosuggest实现了一个搜索栏。目前，条形图并未填充整个可用宽度，它看起来像这样。

我希望此搜索栏覆盖整个顶栏，但边栏测试“区域”除外。

包含搜索栏的NavBar父组件如下：

import React from 'react';
import { Navbar, NavbarBrand} from 'reactstrap';
import { SearchBar } from "./SearchBar";
export class NavBar extends React.Component {
    constructor(props) {
        super(props);

    }
    render() {
        return (
            <Navbar className="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
                <NavbarBrand className="navbar-brand col-sm-3 col-md-2 mr-0" href="/">Sidebar Test</NavbarBrand>
                <SearchBar tickers={this.props.tickers}/>
            </Navbar>
        );
    }
}

该应用程序的整体css如下所示：

/*
 * Navbar
 */
.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/*
 * Search bar
 */
.react-autosuggest__container {
    position: relative;
    width: inherit;
}

.react-autosuggest__input {
    padding: 10px 20px;
    font-family: Helvetica, sans-serif;
    font-weight: 300;
    font-size: 16px;
    border: 1px solid #aaa;
    border-radius: 4px;
}

.react-autosuggest__input--focused {
    outline: none;
}

.react-autosuggest__input--open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.react-autosuggest__suggestions-container {
    display: none;
}

.react-autosuggest__suggestions-container--open {
    display: block;
    position: absolute;
    top: 51px;
    width: 500px;
    border: 1px solid #aaa;
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 2;
}

.react-autosuggest__suggestions-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.react-autosuggest__suggestion {
    cursor: pointer;
    padding: 10px 20px;
}

.react-autosuggest__suggestion--highlighted {
    background-color: #ddd;
}

/*
 * Utilities
 */
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }