title: React Bootstrap Navbar wont align right
body: <p>I Want a fixed header in application with app name to left and menu options to Right, search in middle (exactly like StackOverflow header).</p>
  
  <p>I get everything aligned to the left. I tried <code>pullRight</code>, <code>pull-Right</code>, <code>float-right</code>, nothing works:</p>
  
  <pre><code>import React from 'react';
  import { Button ,Navbar, Nav, NavDropdown, Form, FormControl} from 'react-bootstrap';
  import 'bootstrap/dist/css/bootstrap.css';
  
  export default class Header extends React.Component {
  
      style = {
          backgroundColor : '#656D78',
          color: '#656D78',
          height: '50px',
          width: '100%'
      };
  
      brandStyle = {
          backgroundColor : '#FFCE54',
          height: '100%',
          width: '103px',
          textAlign: 'center',
          color: '#656D78',
          fontWeight: '800',
          fontSize: '30px',
          borderBottom: '2px solid #656D78',
          padding: '9px',
          float : 'left'
      }
      formStyle = {
          float : 'right'
      };
    render(){
      return(
              &lt;Navbar expand="lg"  style = {this.style} &gt;
                      &lt;Navbar.Brand href="#home"  style={this.brandStyle}&gt;MYAPP&lt;/Navbar.Brand&gt;
                      &lt;Form inline className="float-right" style={this.formStyle}&gt;
                          &lt;FormControl type="text" placeholder="Search" className="mr-sm-2 formStyle" /&gt;
                          &lt;Nav.Link href="#home" &gt;Hi, Rag&lt;/Nav.Link&gt;
                      &lt;/Form&gt;
              &lt;/Navbar&gt;
      );
    }
  
  }
  </code></pre>