Fixed navigation bar would not work even using position: fixed in css

I'm having trouble placing fixed navigation on top of my page. I have tried position: fixed with top: 0 and width: 100%, but the image placed with the bootstrap at the bottom of the navigation bar is overlapping. Here is my entire code for HTML and CSS. Been trying to find this problem for hours through resources but I still don't know what the issue is..

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="testing.css">
<!--SOCIAL MEDIA ICON STYLESHEET-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>J[a]Son | Art & Code </title>
<div class="top">
  <div class = "center">
    <h><a href="J.html">J[a]son</a></h>
    <p>Personal Blog</p>
  </div>
    <div class = "top">
      <div class = "logos">
        <a href="https://www.facebook.com/jason.ahn.129/" class="fa fa-facebook"></a>
        <a href="https://www.linkedin.com/in/jasonja-ahn/" class="fa fa-twitter"></a>
      </div>
      <div class = "nav">
        <ul>
          <li><a href="J.html">HOME</a></li>
          <li><a href="#photography">PHOTOGRAPHY</a></li>
          <li><a href="#coding">CODING</a></li>
          <li><a href="#about">ABOUT</a></li>
        </ul>
      </div>
    </div>
</div>

Previous Next

and here is the CSS:

body {
background-color: rgb(241, 233, 233);
}

html, body {
height: 90%;
margin: 0;
padding: 0;
}

.top {
margin: auto;
padding: 0.5em;
overflow: hidden;
background-color: #0a0908; 
width: 100%;
top: 0;
position: fixed;
display: block;
/*position: -webkit-sticky;
position: sticky;*/
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.top p {
color: white;
font-size: 10px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
 }

.center {
text-align: center;
 }

.center a{
color: rgb(224, 224, 228);
font-size: 1.5em;
}

.center a:hover{
text-decoration: none;
color: rgb(224, 224, 228);
}

.nav a {
color: white;
}

.nav ul {
list-style-type: none;
display: inline-block;
}

.nav li {
display: inline;
}

.nav {
float: right;
}

.logos {
float: left;
}

.logos a {
color: white;
}

.top {
clear: both;
overflow: hidden;
}

.nav li a {
color: white;
text-align: center;
padding: 20px 15px;
text-decoration: none;
font-size: 13px;
position: relative;
}

.nav li a:hover::after, a:focus::after {
opacity: 1;
transform: translateY(-2px);
}

.nav li a::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: white;
content: '';
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
transform: translateY(4px);
}

.testing {
padding: 0;
display: block;
margin: auto;
max-height: auto;
max-width: 50%;
}

img {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
height: 600px;
}

.carousel-inner p {
text-align: center;
}

.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg 
xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 
4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg 
xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 
1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

Solution

Try adding z-index:100 to the navbar to make it infront of all other elements. Also if you add z-index to other elements the number should be below 100 or number you give it for the z-index