Collapsed navbar elements being blocked by section content - html

Question

The collapsed navbar is being hidden by the content in the section element - for example, when testing as a small device display (iphone se, etc), the section content blocks the navbar and when I click on the collapsed navbar toggle to get the routes, nothing happens. How come it's not pushing that content down to expand?
Am I wrapping the navbar and section wrong?
Using react, bootstrap v5.3.0-alpha1
export default function Navbar() {
return (
<nav className="navbar navbar-expand-sm">
<div className="container-fluid">
<Link to='/' className="navbar-brand d-none d-md-block">
<img src={"./logo.png"} style={{ height: '50px', width: '50px', borderRadius: '5px'}} alt='' />
</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse text-center justify-content-start" id="navbarTogglerDemo01">
<div className="navbar-nav">
<a className="nav-link" href="/#">about_1</a>
<a className="nav-link" href="/#">about_2</a>
</div>
</div>
<div className="btn-toolbar" role="toolbar">
<div className="btn-group me-2" role="group">
<button type="button" className="btn btn-primary" onClick={signIn} id="sign_in_button">{user === null ? 'Sign In' : user}</button>
</div>
<div className="btn-group me-2" role="group">
<div className="dropdown">
<button className="btn" id="settings" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" style={{ height: '40px'}}>
<i className="bi bi-three-dots"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end" style={{ width: '20vw'}} id="settings_menu">
<div className="container-fluid">
<div className="row">
<div className="col">
<li><h6 className="dropdown-header">Navigation</h6></li>
<li><Link to='/burn' className="dropdown-item">test</Link></li>
<li><a className="dropdown-item" href="https://xxx">test</a></li>
</div>
<div className="col">
<li><h6 className="dropdown-header">Other</h6></li>
<li><a className="dropdown-item" href="https://opensea.io/collection/test">test</a></li>
<li><a className="dropdown-item" href="https://opensea.io/collection/test">test</a></li>
</div>
</div>
<div className="row">
<li><hr className="dropdown-divider" /></li>
<li>
<a className="dropdown-item d-flex justify-content-between align-items-center" href="/#" onClick={() => theme === 'light' ? setTheme('dark') : setTheme('light')}>
Dark Theme
<i className="bi bi-moon"></i>
</a>
</li>
<br />
<br />
<div className="col" style={{ display: 'inline-flex'}}>
<li><a className="dropdown-item" href="https://twitter.com/test"><i className="bi bi-twitter"></i></a></li>
<li><a className="dropdown-item" href="https://t.me/test"><i className="bi bi-telegram"></i></a></li>
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
</nav>
);
}
import Navbar from '../components/navbar.js';
export function Index() {
return (
<>
<Navbar></Navbar>
<section className="">
<div className="container col-xxl-8 px-4 py-5 position-absolute top-50 start-50 translate-middle">
<div className="row flex-lg-row-reverse align-items-center g-5 py-5">
<div className="col-10 col-sm-8 col-lg-6">
<img src={"./test.jpg"} className="d-none d-sm-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="500" height="250" loading="lazy" />
</div>
<div className="col-lg-6 text-start">
<h1 className="display-5 fw-bold lh-1 mb-3" style={{ fontSize: '72px'}}>TEST HEADER</h1>
<p className="lead">
Quickly design and customize responsive mobile-first
sites with Bootstrap, the world's most popular front-end open
source toolkit, featuring Sass variables and mixins, responsive grid system,
extensive prebuilt components, and powerful JavaScript plugins.
A powerful enterprise-grade infrastructure
</p>
<div className="d-grid gap-2 d-md-flex justify-content-md-start">
<button type="button" className="btn btn-primary btn-lg px-4 me-md-2">Try For Free</button>
{/* <button type="button" className="btn btn-outline-secondary btn-lg px-4">Default</button> */}
</div>
</div>
</div>
</div>
</section>
</>
);
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
#media only screen and (max-width: 576px) {
.navbar .btn-toolbar {
position: absolute;
top: 8px;
right: 12px;
}
}
#settings {
border-radius: 5px;
}
#settings:hover {
/* background: #e1e1e1; */
background: var(--bs-tertiary-bg);
border-radius: 5px;
}
/* html[data-bs-theme="dark"] #settings:hover {
background: var(--bs-tertiary-bg);
border-radius: 5px;
} */
.navbar a.nav-link {
margin: 0px 8px;
border-radius: 5px;
}
.navbar a.nav-link:hover {
/* background: #e1e1e1; */
background: var(--bs-tertiary-bg);
border-radius: 5px;
}
/* html[data-bs-theme="dark"] .navbar a.nav-link:hover {
background: var(--bs-tertiary-bg);
border-radius: 5px;
} */
#settings {
color: var(--bs-navbar-color);
}
#sign_in_button {
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
/* outline: webkit-focus-ring-color auto 1px; */
outline: none;
border: none;
}
#sign_in_button:hover {
transform: scale(1.05);
/* background: none; */
outline: none;
border: none;
}