React Bootstrap Navbar wont align right

Keywords: reactjs react-bootstrap

Question: 

Want a fixed header in application with appname to left and menu optios to Right, search in middle (exactly like stackoverflow header).

Instead what is get is everything aligned to the left. Also as per React-bootstrap documentation i tried pullRight pull-Right float-right, nothing works.

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(
            <Navbar expand="lg"  style = {this.style} >
                    <Navbar.Brand href="#home"  style={this.brandStyle}>MYAPP</Navbar.Brand>
                    <Form inline className="float-right" style={this.formStyle}>
                        <FormControl type="text" placeholder="Search" className="mr-sm-2 formStyle" />
                        <Nav.Link href="#home" >Hi, Rag</Nav.Link>
                    </Form>
            </Navbar>
    );
  }

}

Answers: