React-bootstrap navbar doesn't display correctly

Question

My NavBar NavItem displays vertically but I’m trying to display it horizontal. I’m not sure where I messing up. Please let me know if you have any thought on it. Thanks! This is my code:

import React, { Component } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import './CustomNavbar.css'

export default class CustomNavbar extends Component{
  render(){
    return(
  <Navbar inverse collapseOnSelect>
      <Navbar.Header>
          <Navbar.Brand>
            <Link to='/'>Tsarong </Link>
          </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
      <Navbar.Collapse>

      <Nav>
            <NavItem eventKey={1} href="/">
              Home
            </NavItem>
            <NavItem eventKey={2} href="/main">
              Main
            </NavItem>
            <NavItem eventKey={3} href="/contact">
              Contact
            </NavItem>
            <NavItem eventKey={4} href="/about">
              About
            </NavItem>
            <NavItem eventKey={5} componentClass={Link} to="/topics">
              Topic
            </NavItem>
      </Nav>
      </Navbar.Collapse>
  </Navbar>
    )
  }
}

Thank you so much for your time!

Answer 1

<Nav style={{display:"flex", flexDirection:"row"}}>
...
</Nav>