How can I remove the bottom border in the react-bootstrap navbar component?

Question

so I'm working on a project using reactjs(not native) and I'm having a css issue with react-bootstrap. When using the Navbar component with inverse and fluid styling to it I'm getting a small bottom border. It's not only for that as, it's when I'm using the PageHeader component as well. I've tried various css changes to.navbar/.navbar-header/.navbar-default like "border-bottom: none;important:" "border-radius; 0." and none have succeeded. I can edit other things such as the background color though.. Thanks

Navigation.js (this section of code shows navbar options for an authenticated user)

const NavigationAuth = () =>
<div>
    <Navbar inverse fluid>
        <Navbar.Header>
            <Navbar.Brand>
                <a href="/"> Bug Tracker </a>
            </Navbar.Brand>
        </Navbar.Header>
        <Nav pullRight>
            <NavItem eventKey={1} href={routes.LANDING}>Landing</NavItem>
            <NavItem eventKey={2} href={routes.HOME}>Home</NavItem>
            <NavItem eventKey={3} href={routes.ACCOUNT}>Account</NavItem>
            <NavItem>
                <SignOutButton />
            </NavItem>
        </Nav>
    </Navbar>
</div>

App.js (Where the navigation component is called) (code snippet of class App)

render() {
return (
  <Router>
    <div>
      <header>
        <Navigation />
        <hr />
        <Route
          exact path={routes.LANDING}
          component={() => <LandingPage />}
        />

App.css (navbar css attempt snippet)

.navbar-header {
   border-bottom: none;
}

Answer 1

Your border is coming from your Navbar component which has a .navbar.navbar-default class...so you will need to remove border from that class

.navbar.navbar-default {
  border-bottom: 0;
}

Answer 2

try this className="border-0"