How to create a responsive horizontal Navbar?

I'am a backend developer and trying some "easy" stuff in front-end. But CSS driving me crazy. I use a Navbar from react bootstrap, but i simply cant order all Elements horizontal.

NavBar.js

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import navIcon1 from '../assets/img/nav-icon1.svg'
import {useState} from "react";
import './NavBar.css'

export const NavBar = () => {

  const [activeLink, setActiveLink] = useState('home');

  const onUpdateActiveLink = (value) => {
    setActiveLink(value);
  }

  return (
    <Navbar>
      <Container>
        <Nav className="me-auto">
          <Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'}
                    onClick={() => onUpdateActiveLink('home')}>Home</Nav.Link>
          <Nav.Link href="#skills" className={activeLink === 'skills' ? 'active navbar-link' : 'navbar-link'}
                    onClick={() => onUpdateActiveLink('skills')}>Skills</Nav.Link>
          <Nav.Link href="#projects" className={activeLink === 'projects' ? 'active navbar-link' : 'navbar-link'}
                    onClick={() => onUpdateActiveLink('projects')}>Projects</Nav.Link>
        </Nav>
        <span className="navbar-text">
          <div className="social-icon">
            <a href="#"><img src={navIcon1} alt=""/></a>
          </div>
          <button>Let's Connect</button>
        </span>
      </Container>
    </Navbar>
  );
}

NavBar.css

    /*Custom Fonts*/
@font-face {
    font-family: Centra;
    src: url('../assets/font/CentraNo2-Bold.ttf');
    font-weight: 700;
}
@font-face {
    font-family: Centra;
    src: url('../assets/font/CentraNo2-Medium.ttf');
    font-weight: 500;
}
@font-face {
    font-family: Centra;
    src: url('../assets/font/CentraNo2-Book.ttf');
    font-weight: 400;
}

body {
    font-weight: 400;
    background-color: #121212 !important;
    color: #fff !important;
    font-family: 'Centra', sans-serif !important;
    margin: 0;
    padding: 0;
}

span.navbar-text {
    display: flex;
}

Actually i have this result:

i tryed so many things right now, but nothing seems to work. I just wanna have this result: