Reactstrap-将导航栏项目左右对齐

Question

我目前有一个导航栏，该导航栏的左侧是网站导航，右侧是登录/注册/搜索。当我添加带有图像的按钮时，导航栏的布局出错，无法解决。应该在右边的元素在中间居中对齐。

这是我的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>

我的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%;
}

当我检查元素时，似乎是formgroup占据了搜索按钮和注册按钮之间的所有空间。