Reactstrap - Align navbar items to left and right - css

Question

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.
This is my JSX:
<Navbar className="custNav navbar-inverse bg-primary" expand="md">
<NavbarBrand className='custNav' href="/">Brand</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className='mr-auto' navbar>
<NavItem className='custNav'>
<NavLink className='custNav' href="/comments">Home</NavLink>
</NavItem>
<NavItem className='custNav'>
<NavLink className='custNav' href="/report">About Us</NavLink>
</NavItem>
<NavItem>
<NavLink className='custNav' href="/report">Contact Us</NavLink>
</NavItem>
</Nav>
<Nav className='rightNav ml-auto' navbar>
<NavItem className=' custNav'>
<NavLink className='custNav' href="/comments">Login</NavLink>
</NavItem>
<NavItem className='custNav'>
<NavLink className='custNav' href="/report">Signup</NavLink>
</NavItem>
<FormGroup className='m-auto'>
<Input type="text" name="search" id="search" placeholder="Search" />
</FormGroup>
<Button className='searchBTN'><img className='btnIMG' src={searchIMG} alt=''/></Button>
</Nav>
</Collapse>
</Navbar>
My CSS:
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%;
}
When I inspected the element, it appears to be the formgroup that is taking up all the room between the search button and the signup button.