How Do I make my component only fill the entire viewport so their is no scrolling option

I am building my website and need help with styling this React component. It is the main page and I have a navbar and then another section with info and links. I want to be able to get the entire page to fill up the viewport so the user doesn't have that unnecessary scroll bar on the right side of the screen. How do I accomplish this? This is all I have.

import NavBar from "./NavBar";
import SocialMedia from "../socialmedia/SocialMedia";
import classes from './MainView.module.css';
import background from '../../img/pic2.jpg';



function MainView() {
    const style = {
        backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`
    };

    return (
        <>
            <NavBar />
            <section style={style}
                className={classes.top}>
                <div className={classes.text__div}>
                    <p className={classes.profile__name}>My Name</p>
                    <p className={classes.profile__dev}>Full Stack Web Developer</p>
                </div>
                <SocialMedia />
            </section>
        </>
    )
}

export default MainView;



@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Trispace&display=swap');


.top {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    width: 100%;
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-align: center;
}

.text__div {
    text-align: center;
}

.profile__name {
    padding-top: 15rem;
    font-size: 4rem;
    margin-bottom: 2rem;
    margin-top: 0rem;
}

.profile__dev {
    font-size: 2rem;
}