网站导航容器固定在屏幕顶部中央的问题求助

需要将包含Logo与导航栏的容器固定在屏幕顶部，尝试修改CSS的position属性、使用flex布局、调整top值后均未解决问题。

预期效果：容器固定在屏幕顶部，始终保持在视野范围内

CSS代码 #

@font-face {
  font-family: IDIDNTSTEALTHIS;
  src: url(https://static.wixstatic.com/ufonts/617a47_069dbc8c08b34b95bda387f5d2f9b534/woff2/file.woff2);
}

html {
  height: 100%;
  width: 100%;
  font-family: 'Helvetica', 'Arial', sans-serif;
  box-sizing: border-box;
  background-color: black;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: IDIDNTSTEALTHIS;
}

header#SiteHeader {
  display: none;
}

body {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.btm-nav {
  width: auto;
  text-align: center;
}

.btm-nav i {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: white;
  padding-top: 1px;
}

.btm-nav h1 {
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-family: IDIDNTSTEALTHIS;
  margin: -2px 0px 0px;
}

a,
:active,
:hover,
:visited {
  text-decoration: none;
}

.context-menu {
  display: none;
}

.menu-button {
  display: block;
  width: 100%;
  height: 25px;
  background-color: #000000;
  margin-bottom: 0;
  text-align: center;
  line-height: 25px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 3px;
  color: #FFFFFF;
  font-size: 10px;
}

.menu-button:hover {
  background-color: #3E3E3E;
}

.social-media-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  width: 100%;
}

.social-media-button {
  flex-grow: 1;
  height: 40px;
  background-color: #0B0B0B;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  cursor: pointer;
  width: calc(25% - 1px);
  border: 1px solid #cecece;
  border-radius: 5px;
  margin-left: 2px;
}

.social-media-button:hover {
  background-color: #363636;
}

.social-media-button i {
  font-size: 15px;
  display: flex;
  align-items: center;
}

.social-media-button i {
  color: #FFFFFF;
}

i.fa-brands.fa-discord {
  margin-top: 0px;
}

.btm-nav-1 {
  border-top-left-radius: 0px;
}

.btm-nav-1 {
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.btm-nav-2 {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.btm-nav-3 {
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.btm-nav-4 {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.logo-container img {
  max-width: 134px;
  max-height: 89%;
}

.btm-nav-1,
.btm-nav-2,
.btm-nav-3,
.btm-nav-4,
.btm-nav-5 {
  flex-grow: 1;
  margin: 5px;
  background-color: #000;
  border: 0.05px solid #FFF;
  padding: 1px;
  width: 134px;
  height: 20px;
}

.btm-nav-1:hover,
.btm-nav-2:hover,
.btm-nav-3:hover,
.btm-nav-4:hover,
.btm-nav-5:hover {
  border: 2px solid #FFF;
  border-radius: 5px;
  padding: 0;
}

.social-nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 12px;
}

.social-link {
  margin: 0px 5px;
}

HTML代码 #

<body>
  <div class="container">
    <div class="logo-container">
      <img class="syn-img" src="https://cdn.shopify.com/s/files/1/0651/1683/1959/files/NEW-LOGO.png?v=1686555777" alt="Logo">
    </div>
    <div class="btm-nav">
      <div class="btm-nav-1">
        <a href="#" target="_blank">
          <h1>BUTTON</h1>
        </a>
      </div>
      <div class="btm-nav-2">
        <a href="#" target="_blank">
          <h1>BUTTON</h1>
        </a>
      </div>
      <div class="btm-nav-3">
        <a href="#" target="_blank">
          <h1>BUTTON</h1>
        </a>
      </div>
      <div class="btm-nav-4">
        <a href="#" target="_blank">
          <h1>BUTTON</h1>
        </a>
      </div>
      <div class="btm-nav-5">
        <a href="#" target="_blank">
          <h1>BUTTON</h1>
        </a>
      </div>
      <div class="social-nav">
        <div class="social-link discordLink">
          <a href="#">
            <i class="fa-brands fa-discord" style="color: #ffffff;"></i>
          </a>
        </div>

        <div class="social-link instagramLink">
          <a href="#">
            <i class="fa-brands fa-instagram" style="color: #ffffff;"></i>
          </a>
        </div>

        <div class="social-link twitterLink">
          <a href="#">
            <i class="fa-brands fa-twitter" style="color: #ffffff;"></i>
          </a>
        </div>

        <div class="social-link tiktokLink">
          <a href="#">
            <i class="fa-brands fa-tiktok" style="color: #ffffff;"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

要实现容器固定在屏幕顶部，需调整以下CSS样式：

1. 给.container添加固定定位样式：

.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: black;
  padding: 10px 0;
  z-index: 999;
}

2. 调整body布局，避免内容被固定容器遮挡：

body {
  height: 100%;
  width: 100%;
  /* 移除place-items: center，固定容器无需居中 */
  padding-top: 120px; /* 根据容器实际高度调整，防止内容被遮挡 */
  box-sizing: border-box;
}

3. 优化导航按钮排列，改为横向布局（可选，符合顶部导航栏的常规样式）：

.btm-nav {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

修改后，容器会始终固定在屏幕顶部，滚动页面时不会移动，同时下方内容不会被遮挡。

内容的提问来源于stack exchange，提问作者aaa