我刚刚开始我的第一个公共网站，我遇到了一个问题。我想使我的标志为它循环（我已经做过了），然后使其位于导航栏末端和主体之间。我想知道如何添加底部填充或添加元素到导航栏的垂直下方，而不改变导航栏背景的下方距离（白色）结束。现在的网址是https://fruitfulorientation.gq/。
更多源代码：https://replit.com/@CreativeDrone/LGBTQIA-orientation#style.css
我的导航栏代码：

<nav>
    <a href="index.html"><img src="https://LGBTQIA-orientation.creativedrone.repl.co/navspacer.png"></a>
    <ul class="navlinks">
      <a href="index.html" class="a">Home</a>
      <a href="" class="b">Genders</a>
      <a href="" class="c">Sexualities</a>
      <a href="" class="d">Quiz</a>
      <a href="" class="f">Donate</a>
      <a href="" class="g">About</a>
    </ul>
    <div class="navlogofinal">
    <img class="navlogo" src="https://LGBTQIA-orientation.creativedrone.repl.co/CreativeDrone-logoss_transparent.png" alt="navlogo">
    </div>
  </nav>
</div>

导航栏的CSS代码：

• 重置样式在此之上 *

.nav::before {
  content:"";
  background: linear-gradient(90deg, #ff3838, #ff9d14, #fbff1a, #57ff1a, #1f26ff, #bb00ff);
  position: absolute;
  height: 13%;
  width: 37%;
  z-index: -1;
  filter: blur(20px);
  left:30%;
} 
nav {
  display: inline-flex;
  background-color: #ffffff;
  width: 50%;
  left: 50%;
  transform: translateX(50%);
  margin: 0 auto;
  border-style: solid;
  border-radius: 15px;
}

.navlinks {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0px;
  overflow: hidden;
  display: flex; 
}

.a {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration: none;
  color:#ff4747;
  font-weight: 600;
  font-size:20px;
}

.a:hover {
  color: #932f2f;
}

.b {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration: none;
 color:#ffba24;
  font-weight: 600;
  font-size:20px;
}

.b:hover {
  color: #ae811e;
}

.c {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration: none;
  color:#ffee33;
  font-size:20px;
}

.c:hover {
  color: #998f24;
}

.d {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration: none;
  color:#5fff33;
  font-weight: 600;
  font-size:20px;
}

.d:hover {
  color:#3c9c21;
}

.f {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration: none;
  color:#4b33ff;
  font-weight: 600;
  font-size:20px;
}

.f:hover {
  color: #2b1e8f;
}

.g {
  font-family: 'Mulish', sans-serif;
  margin-right:15px;
  text-decoration:none;
  color:#6b136c;
  font-weight: 600;
  font-size:20px;
}

.g:hover {
  color: #2e0a2f;
}

.navlogo {
  position: relative;
  display: block;
  max-width: 60px;
  max-height: 60px;
  border-radius:100px;
  background-color:#f0f0f0;
  margin: auto;
}

.navlogofinal {
 display: block;
  margin-left: calc(50% - 86px);
  transform: translateX(-50%);
  padding-top: 40px;
}

我想做的一个例子是这个网站的主体和页脚的标志边框：https://www.amitmerchant.com/