HTML/CSS导航栏问题：Sign Out按钮与Logo无法点击

问题根源 #

中间的#menu-items容器存在层级覆盖或宽度溢出情况，导致两侧的Logo和Sign Out按钮虽视觉位置正确，但实际被上层元素遮挡，无法触发点击事件。

修复方法 #

方法一：提升两侧元素层级（推荐）

给左右两侧容器添加position: relative和z-index: 1，确保它们处于中间菜单的上层：

修改左侧Logo容器：

<div style="position: relative; z-index: 1;">
  <a href="https://www.test.com/" style="text-decoration: none;">
    <img src="static/LOGO 1.png" alt="Logo" style="max-height: 60px; margin-left: 15px;">
  </a>
</div>

修改右侧Sign Out容器（同时修正无效的align-items: right为align-items: center）：

<div style="margin: 0px; display: flex; align-items: center; position: relative; z-index: 1;">
  <a href="https://www.test.com/logout" style="background-color: #00bbff; color: #ffffff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; margin-right: 15px; font-weight: 700; text-decoration: none;">Sign Out</a>
</div>

方法二：限制中间菜单宽度

通过设置max-width避免中间菜单溢出覆盖两侧元素，数值可根据实际布局调整：

<div id="menu-items" style="display: flex; justify-content: center; align-items: center; max-width: calc(100% - 200px);">

内容的提问来源于stack exchange，提问作者U13-Forward