Alignment Issue on creating grid for Nav Bar using css - html

Question

I am working on page layout using react-bootstrap. Along with that, I am using pure CSS for it. I have an alignment issue for Navbar on desktop view and mobile view. The components in the top bar should align with the components in the bottom bar in medium & large devices. The layout is different on the mobile device. In large devices Nav toggle bar expands and shrinks in the mobile devices when the user clicks on the toggle bar in the mobile screen, it expands down as shown in the figure. I hope the problem is clear. I have added the code and sample of the layout. Can someone help me to solve this issue?
CODE
<Container noGutters>
<Row className='main-nav d-flex' style={{ alignItems: 'center', justifyContent: 'flex-start' }}>
<Col sm={12} md={4} style={{ textAlign: 'center' }}>
<a href='/'>
visit mysite.com
</a>
</Col>
<Col sm={12} md={4} style={{ textAlign: 'center' }}>
<a href='#about-us'>
<picture>
<source srcSet={require('../public/assets/_logo.png?webp')} type='image/webp' />
<img className='cure-top-logo' src={'/assets/logo.png'} />
</picture>
</a>
</Col>
<Col sm={12} md={4}>
<Dropdown className='top-dropdown-container'>
<Dropdown.Toggle variant='success' id='dropdown'>
Choose an Item
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href='/'>ITEM 1</Dropdown.Item>
<Dropdown.Item href='/'>ITEM 2</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Col>
</Row>
</Container>
<Navbar style={{ maxHeight: '90px' }} className='sole-bottom-nav' expand={'lg'}>
<Container>
<div className='bottom-nav-logo-container'>
<a href='/cure-adventures/sole2soul'>
<div className='bottom-logo'>
<img alt='' src='assets/header.png' />
</div>
</a>
</div>
<Navbar.Toggle aria-controls='navlinks' />
<Navbar.Collapse id='navlinks'>
<Nav>
<Nav.Link className={activePage === 'about-us' ? ' active' : ''} href='/about-us'>
About Us
</Nav.Link>
<Nav.Link className={activePage === 'treks' ? ' active' : ''} href='/news'>
News
</Nav.Link>
<Nav.Link className={activePage === 'news' ? ' active' : ''} href='/contact'>
Contact us
</Nav.Link>
</Nav>
<div>
<a rel='noopener nofollow' target='_blank' href='https://twitter.com'>
<img src='/assets/twitter.png' width='25px' />
</a>
<a rel='noopener nofollow' target='_blank' href='https://facebook.com'>
<img src='/assets/facebook.png' width='25px' />
</a>
<a rel='noopener nofollow' target='_blank' href='https://instagram.com'>
<img src='/assets/instagram.png' width='25px' />
</a>
<a rel='noopener nofollow' target='_blank' href='/'>
<img src='/assets/linkdin.png' width='25px' />
</a>
</div>
<div>
<Button size={'lg'}>
button
</Button>
</div>
</Navbar.Collapse>
</Container>
</Navbar>
</div>