响应式模式下Navbar Logo无法水平居中的CSS问题求助

1. 元素隐藏未释放空间：响应式规则中给.nav_options设置visibility: hidden，该属性仅隐藏元素可见性，但元素仍会占据布局空间。nav容器使用justify-content: space-around时，会将logo和这个“占位”的.nav_options作为两个子元素分配空间，导致logo无法居中。
2. 样式优先级冲突：全局nav样式定义在媒体查询之后，其中的justify-content: space-around会覆盖媒体查询内的justify-content: center，使得响应式规则无法生效。
3. 字体拼写错误：全局选择器里的sans-seriff多写了一个f，正确拼写为sans-serif（不影响居中，但属于代码细节问题）。

* {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* 修正字体拼写 */
}

.navbar {
  display: flex;
  position: sticky;
  place-content: center;
  height: 96px;
}

/* 将媒体查询移至全局nav样式之后，自然获得更高优先级 */
nav {
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: space-around;
}

@media only screen and (max-width: 1320px) {
  .nav_options {
    display: none; /* 替换visibility: hidden，彻底移除元素布局空间 */
  }
  nav {
    justify-content: center;
  }
}

.nav_options ul {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
}

.nav_options ul li {
  font-size: 18px;
  padding: 0 18px;
}

.nav_options ul li a {
  display: flex;
  align-items: center;
  color: black;
  text-decoration: none;
}

.nav_options ul li a:hover {
  color: rgb(100, 100, 100);
  transition-duration: 450ms;
}

.nav_options ul li a svg {
  padding: 5px;
  width: 15px;
}

• 用display: none替代visibility: hidden：彻底移除.nav_options的布局空间，让nav容器内仅保留logo一个子元素，配合justify-content: center实现居中。
• 调整媒体查询位置：将媒体查询放在全局nav样式之后，无需额外添加!important即可确保响应式规则优先级更高，覆盖全局样式。

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