Sticky Navbar isn't sticking using Bootstrap 4 - css

Question

My site loads a background image with 100vh as the landing page. Right below out of initial view is the navbar and when the user scrolls down I wan't the navbar to stick to top of the page once it reaches the top. I'm using React.js with Bootstrap 4. Here is the Stackblitz as well as JS and SCSS below. I've put the sticky-top class on the nav element but it's not working, what might I be doing wrong?
This is the index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.scss';
class App extends Component {
render() {
return (
<div className='App'>
<section id='home' className='home'>
<div className='home__background'>
<div className='dark-overlay'>
<h1>Background Image using CSS</h1>
<div className='home__background__content'><h3>Text</h3><button>Go To About</button></div>
</div>
</div>
<nav className='navbar user-nav sticky-top'>
<div className='user-nav__links'>
<a href='#home' className='user-nav__links__link active'>
Home
</a>
<a href='#section2' className='user-nav__links__link'>
Section2
</a>
<a href='#section3' className='user-nav__links__link'>
Section3
</a>
<a href='#section4' className='user-nav__links__link'>
Section4
</a>
<a href='#section5' className='user-nav__links__link'>
Section5
</a>
</div>
</nav>
</section>
<section id='section2' className='section2'>
<p>section2</p>
</section>
<section id='section3' className='section3'>
<p>section3</p>
</section>
<section id='section4' className='section4'>
<p>section4</p>
</section>
<section id='section5' className='section5'>
<p>section5</p>
</section>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Here is the style.scss
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
font-size: 62.5%;
}
.home {
&__background {
height: 100vh;
//background-image: url('./img/bg1.jpg');
background-size: cover;
overflow: hidden;
&__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 30%;
}
}
}
.user-nav {
width: 100%;
background-color: black;
text-transform: uppercase;
padding: 2rem;
margin-right: 2rem;
a {
text-decoration: none;
}
&__links {
height: 100%;
&__link {
height: 100%;
font-size: 1.7rem;
color: white;
margin-right: 5rem;
line-height: 100%;
&:hover {
color: lightblue;
}
}
}
.active {
color: orange;
}
}
.section2 {
height: 400px;
}
.section3 {
height: 500px;
}
.section4 {
height: 400px;
}
.section5 {
height: 500px;
}

Answer 1

Solved! I took the navbar out of the section tag and put it after.