NavbarBrand and the NavLink are not on the same level in reactstrap

This is my react app and the code given below is the AppNavbar.js which is in my components folder:

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './AppNavbar.css'
// import './AppNabar.css'
import {
    Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
    Container
} from 'reactstrap';

class AppNavbar extends Component{
    state = {
        isOpen: false
    }

    toggle = () => {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }

    render() {
        return(
        <div id='menu'>
            <Navbar color='dark' dark expand="sm" className='mb-5'>
                <Container className='allelements'>
                    <NavbarBrand href='/'>cloudBook</NavbarBrand>
                    <NavbarToggler onClick={this.toggle} />
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className='me-auto' navbar>
                        </Nav>
                            <NavLink href='https://github.com/Sarthak8822' className='gitlink'>Github</NavLink>
                    </Collapse>
                </Container>
            </Navbar>
        </div>
        )
    }
}
export default AppNavbar;

And this my App.js file:

import './App.css';
import AppNavbar from './components/AppNavbar'

function App() {
  return (
    <AppNavbar />
  )
}

export default App;

Now the problem is that my Navbar elements are not aligned properly

I'm not able to get what the problem is in my AppNavbar.js file? Please provide the Css styling or something which can resolve my problem.