我尝试为我的导航栏设置一个下拉菜单，但我不知道如何将我的下拉菜单与导航栏对齐，它总是向侧面移动

function myFunction2() {
  document.getElementById("topnavi").classList.toggle("show");
  document.getElementById("mydb2").classList.toggle("show2");
  document.getElementById("mydb").classList.toggle("hide");
}

function show() {
  document.getElementById("dropbutton2").classList.toggle("show");
  document.getElementById("dropdown2").classList.toggle("width");
}

.topnav {
  background-color: #9e2118;
  position: fixed;
  width: 100%;
  top: 0px;
  margin: 0px;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  position: relative;
}

.dropdown-content a {
  display: none;
  color: black;
  text-decoration: none;
  min-width: 148px;
  margin: auto;
  background-color: #9e2118;
}

<div class="topnav" id="topnavi">
  <a href="index.html" class="active">Home</a>
  <a href="art.html">Art</a>
  <a href="resources.html">Resources</a>
  <div class="dropdown">
    <a href="proj.html" class="dropbtn">Projects &nbsp;&#8964;</a>
    <div class="dropdown-content">
      <a href="podcast.html">Podcast</a>
    </div>
  </div>
  <a href="about.html">About</a>
</div>

我试着使用FlexBox，但是当我让显示器弯曲时，元素就消失了，我也不知道它为什么会这样做。
https://replit.com/@skylarhiya/navbar#index.html
我是stack的新手，不知道代码片段是如何工作的，所以这里有代码的链接。