Alignment of Nav items divided in React-Bootstrap

Question

I implemented NavBar using react-bootstrap My problem is the alignment of nav items. After searching for similar questions including this one, I applied to solutions answered to it. However, I didn't find a proper answer for my case. As you see in the image below, I intended for that except Title, other items need to be aligned on the right side using ml-auto, but it's not working properly. Do you have a way to solve this?

import React from "react";
import { Nav, Navbar, NavDropdown } from "react-bootstrap";

const NavBarTest = () => {
  return (
    <>
      <Navbar collapseOnSelect expand="sm">
        <Navbar.Brand href="#">Title</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="ml-auto" light="true">
            <NavDropdown title="Content A" id="nav-dropdown1">
              <NavDropdown.Item href="#">content a</NavDropdown.Item>
            </NavDropdown>
            <NavDropdown title="  Content B" id="nav-dropdown2">
              <NavDropdown.Item href="#">content b-1</NavDropdown.Item>
              <NavDropdown.Item href="#">content b-2</NavDropdown.Item>
            </NavDropdown>
            <NavDropdown title=" Content C" id="nav-dropdown3">
              <NavDropdown.Item href="#">content c-1</NavDropdown.Item>
              <NavDropdown.Item href="#">content c-2</NavDropdown.Item>
            </NavDropdown>
            <NavDropdown title="Content D" id="nav-dropdown1"></NavDropdown>
            <NavDropdown title="Content E" id="nav-dropdown1">
              <NavDropdown.Item href="#">content e</NavDropdown.Item>
            </NavDropdown>
            <Nav.Item>
              <Nav.Link href="#">Content F</Nav.Link>
            </Nav.Item>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </>
  );
};

export default NavBarTest;

import "./App.css";
import React from "react";
import { Switch, BrowserRouter, Redirect, Route } from "react-router-dom";
import NavBarTest from "./layout/NavBarTest";

function App() {
  return (
    <div
      className="row ml-auto mr-auto"
      style={{
        width: "80%",
        alignItems: "center",
      }}
    >
      <BrowserRouter>
        <NavBarTest/>
       
        <Footer />
      </BrowserRouter>
    </div>
  );
}

export default App;

Answer 1

Below is an example of navbar right align, and I hope this will help you out. https://codesandbox.io/s/react-bootstrap-hamburger-menu-example-forked-t6xo5?file=/src/App.js

Answer 2

As looking up codes, I found the style of App.jsx affects the layout of the navigation area. After removing 'row' class from the style of app.js, it looks fine.

import "./App.css";
import React from "react";
import { Switch, BrowserRouter, Redirect, Route } from "react-router-dom";
import NavBarTest from "./layout/NavBarTest";

function App() {
  return (
    <div
      className="ml-auto mr-auto"
      style={{
        width: "80%",
        alignItems: "center",
      }}
    >
      <BrowserRouter>
        <NavBarTest/>
       
        <Footer />
      </BrowserRouter>
    </div>
  );
}

export default App;