Why is the navigation bar not on top of the website?

I'm currently practicing html and css by creating a simple website.

My problem is I can't put the navigation bar above the website. I think the problem is the header or the background video. Here's the picture for more details. Click here

I think the gameplay paragraph will be on its own place when the navigation bar is resolved.

Now here's my html and css code.

body{
    background: rgba(236,232,225,255);
    color: #333;
    font-family: helvetica;
    font-size: 15px;
    line-height: .5cm;
    
    margin: 0;
    padding: 0;
}

/* links configuration here */
a:link{
    text-decoration: none;
    color:rgba(216, 108, 108, 0.932);
}

a:hover{
    color: blue;
}
/* links configuration ends here */

#webname{ /* heading here */
    padding-top: 15%;
    padding-bottom: 15%;
    
    text-align: center;
    font-size: 150px;
    font-family: VALORANT;
    color:white;
}

#navname{ /* navigation bar name */   
    font-size: 75px;
    font-family: VALORANT;
    color: rgba(216, 108, 108, 0.932);

    float: left;
    padding-left: 30px;

    -webkit-text-fill-color: rgba(216, 108, 108, 0.932);
    -webkit-text-stroke: 1px white;
}

.navlinks li{ /* navigation links */
    display: inline;
    padding-right: 15px;
    font-family: Helvetica;
    font-weight: bold;

    float: right;
}

#videoBG{ /* background vid */
    position: absolute;
    right: 0; 
    bottom: 30%;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

@media (min-aspect-ratio: 16/9){
    #videoBG{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9){
    #videoBG{
        width: auto;
        height: 100%;
    }
}

@media (max-width: 767px){
    #videoBG{
        display: none;
    }

    body {
        background: url('valoClip.png');
        background-size: cover;
    }
}

@font-face {
    font-family: 'VALORANT';
    src: url(fonts/Valorant\ Font.ttf);
    font-style: normal;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Valorant</title>
    <link rel="stylesheet" href="Valorant.css">
</head>

<body>
    <!--Title-->
    <h1 id="webname">valoraNt</h1>
    <h1 id="navname">valoraNt</h1>
    
    <div class="wrapper">
        <video id="videoBG" poster="valoClip.png" autoplay muted loop>
            <source src="valoClip.mp4" type="video/mp4">
        </video>

    </div>

    <!--Navigation Bar here-->
    <nav id="navbar">
        <div class="container">
            <ul class="navlinks">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Gameplay</a></li>
                <li><a href="#">Guides</a></li>
            </ul>
        </div>
    </nav>
    
    <!--Gameplay here-->
    <div class="mainBody">
        
    <h3>GAMEPLAY</h3>
    
    <p>
    Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits.
    Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack
    and defend your side using sharp gunplay and tactical abilities. And, with one life per-round,
    you'll need to think faster than your opponent if you want to survive. Take on foes across
    Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice
    mode or tool to help you manage your aim.
    </p>
    
    <p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>
    
</div>

I'm not sure if the use of some code is right but you can also teach me the proper use of the code. Thanks for your help :>

Solution

It is because you put your navigation bar after the h1 tags that it is like that. Make a header tag and put the h1 with the navname id and put your navigation in the said header tag. I've added some CSS stylings in your code. Check it out and implement it in your project as you see fit.

body {
  background: rgba(236, 232, 225, 255);
  color: #333;
  font-family: helvetica;
  font-size: 15px;
  line-height: .5cm;
  margin: 0;
  padding: 0;
}

header {
  align-content: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white'

}


/* links configuration here */

a {
  text-decoration: none;
  color: rgba(216, 108, 108, 0.932);
}

a:hover {
  color: blue;
}


/* links configuration ends here */

#webname {
  /* heading here */
  padding-top: 15%;
  padding-bottom: 15%;
  text-align: center;
  font-size: 150px;
  font-family: VALORANT;
  color: white;
}

#navname {
  /* navigation bar name */
  font-size: 75px;
  font-family: VALORANT;
  color: rgba(216, 108, 108, 0.932);
  float: left;
  padding-left: 30px;
  -webkit-text-fill-color: rgba(216, 108, 108, 0.932);
  -webkit-text-stroke: 1px white;
}

.navlinks {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  font-size: 20px;
}

.navlinks li {
  /* navigation links */
  float: right;
}

.navlinks a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  font-size: 40px;
}

#videoBG {
  /* background vid */
  position: absolute;
  right: 0;
  bottom: 30%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  overflow: hidden;
}

@media (min-aspect-ratio: 16/9) {
  #videoBG {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  #videoBG {
    width: auto;
    height: 100%;
  }
}

@media (max-width: 767px) {
  #videoBG {
    display: none;
  }
  body {
    background: url('valoClip.png');
    background-size: cover;
  }
}

@font-face {
  font-family: 'VALORANT';
  src: url(fonts/Valorant\ Font.ttf);
  font-style: normal;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Valorant</title>
  <link rel="stylesheet" href="Valorant.css">
</head>

<body>
  <!--Navigation Bar here-->
  <header>
    <div>
      <h1 id="navname">valoraNt</h1>
    </div>
    <nav id="navbar">
      <ul class="navlinks">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gameplay</a></li>
        <li><a href="#">Guides</a></li>
      </ul>
    </nav>
  </header>

  <!--Title-->
  <h1 id="webname">valoraNt</h1>

  <div class="wrapper">
    <video id="videoBG" poster="valoClip.png" autoplay muted loop>
            <source src="valoClip.mp4" type="video/mp4">
        </video>

  </div>

  <!--Gameplay here-->
  <div class="mainBody">

    <h3>GAMEPLAY</h3>

    <p>
      Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits. Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack and defend your side using sharp gunplay and tactical
      abilities. And, with one life per-round, you'll need to think faster than your opponent if you want to survive. Take on foes across Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice mode or tool to help
      you manage your aim.
    </p>

    <p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>

  </div>