title: Reactstrap - Align navbar items to left and right
body: <p>I currently have a navbar that has site navigation to the left and login/register/search to the right. When I add a button with an image, the layout of the navbar goes wrong and I cannot solve it. The elements that should be to the right, are aligning more the the middle.</p>
  
  <p>This is my JSX:</p>
  
  <pre><code>&lt;Navbar className="custNav navbar-inverse bg-primary" expand="md"&gt; 
        &lt;NavbarBrand className='custNav' href="/"&gt;Brand&lt;/NavbarBrand&gt;
        &lt;NavbarToggler onClick={this.toggle} /&gt;
        &lt;Collapse isOpen={this.state.isOpen} navbar&gt;
            &lt;Nav className='mr-auto' navbar&gt;
                &lt;NavItem className='custNav'&gt;
                    &lt;NavLink className='custNav' href="/comments"&gt;Home&lt;/NavLink&gt;
                &lt;/NavItem&gt;
                &lt;NavItem className='custNav'&gt;
                    &lt;NavLink className='custNav' href="/report"&gt;About Us&lt;/NavLink&gt;
                &lt;/NavItem&gt;
                &lt;NavItem&gt;
                    &lt;NavLink className='custNav' href="/report"&gt;Contact Us&lt;/NavLink&gt;
                &lt;/NavItem&gt;
            &lt;/Nav&gt;
  
            &lt;Nav className='rightNav ml-auto' navbar&gt;
                &lt;NavItem className=' custNav'&gt;
                    &lt;NavLink className='custNav' href="/comments"&gt;Login&lt;/NavLink&gt;
                &lt;/NavItem&gt;
                &lt;NavItem className='custNav'&gt;
                    &lt;NavLink className='custNav' href="/report"&gt;Signup&lt;/NavLink&gt;
                &lt;/NavItem&gt;
                &lt;FormGroup className='m-auto'&gt;
                    &lt;Input type="text" name="search" id="search" placeholder="Search" /&gt;
                &lt;/FormGroup&gt;
                &lt;Button className='searchBTN'&gt;&lt;img className='btnIMG' src={searchIMG} alt=''/&gt;&lt;/Button&gt;
            &lt;/Nav&gt;
        &lt;/Collapse&gt;
    &lt;/Navbar&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>body{
    flex: 1;
  }
  
  .custNav{
    background-color: #d4452d !important; 
    color: #f1f2ed !important;
  }
  
  .searchNav{
    justify-content: center !important;
    align-items: flex-start !important;
  }
  
  .searchBTN{
    background-color: #d4452d !important; 
    color: #f1f2ed !important;
    border-color: #d4452d;
    width: 5%;
    height: 5%;
  }
  
  .btnIMG{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  </code></pre>
  
  <p>When I inspected the element, it appears to be the <code>formgroup</code> that is taking up all the room between the search button and the signup button.</p>