reactJS application with navbar does not right justify dropdown menu items - css

Question

I have a reactJS application which incorporates navbar for navigation. The initial view shows the 3 line menu icon in the top right hand corner which is what I want. It looks like this:
When I click on the menu icon, the drop down appears like this:
I am trying to get the dropdown to align the menu items to the right, not to the left. This is the code that generates the navbar:
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav pullRight">
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.accountinformation}>Basic Account Information</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.contributions}>Contributions</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.investmentelections}>Investment Elections</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.beneficiary}>Beneficiary Information</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.transfer}>Transfers</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.loans}>Loans</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.transactionhistory}>Transaction History</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.documents}>Documents</a>
</li>
<li class="active">
<a className="nav-link menuItemColor" onClick={this.logout}>Logout</a>
</li>
</ul>
</div>
I thought putting the pullRight in the classname would pull the items to the right. I guess not.
Any suggestions?
Thank you.

Answer 1

I am trying to get the dropdown to align the menu items to the right,
not to the left.
You can use flexbox to achieve that layout.
Something like this should work:
.pullRight .nav-item {
display: flex;
justify-content: flex-end;
}