Header元素位置偏移问题：检查元素与全屏状态显示不一致

问题场景 #

开启浏览器Inspect Element工具时，Header显示完全符合预期；关闭工具、页面全屏状态下，导航项出现偏移甚至部分移出屏幕。需求是实现Logo居中、导航栏居中的Header效果，对应的HTML代码如下：

<nav>
  <div><img src="./Digital Assets/Capture.PNG" style="height: 20vh; width: 100%;"></div>

  <div class="Nav" style="text-align: center; position: relative; top: -40px;">
    <ul>
      <h2 style="display: inline-block; margin-inline: 3em;"><a href="" style="text-decoration: none; color: antiquewhite;">Home</a></h2>
      <h2 style="display: inline-block; margin-inline: 3em;"><a href="" style="text-decoration: none; color: antiquewhite;">About Us</a></h2>
      <h2 style="display: inline-block; margin-inline: 3em;"><a href="" style="text-decoration: none; color: antiquewhite;">Tours</a></h2>
      <h2 style="display: inline-block; margin-inline: 3em;"><a href="" style="text-decoration: none; color: antiquewhite;">Bookings</a></h2>
      <h2 style="display: inline-block; margin-inline: 3em;"><a href="" style="text-decoration: none; color: antiquewhite;">Contact Us</a></h2>
      <img src="./Digital Assets/Logo2.PNG" style="position: relative; top: -150px;">
    </ul>
  </div>
</nav>

异常核心原因 #

• Logo布局占用隐性空间：Logo图片嵌套在<ul>内部，使用position: relative; top: -150px;仅视觉上向上偏移，但其原始占位空间并未消失，会挤占导航项的可用宽度。全屏时页面宽度达到临界值，导航项的margin-inline: 3em加上自身宽度，再加上Logo的隐性占位，总宽度超出容器范围，导致导航项偏移或溢出。
• 浏览器窗口宽度变化触发布局矛盾：打开Inspect Element工具时，浏览器窗口宽度被工具占用而缩小，此时导航项总宽度刚好适配缩小后的容器，因此显示正常；关闭工具后页面宽度恢复，布局的隐性冲突直接暴露。
• HTML结构不符合语义规范：<ul>的直接子元素应为<li>，但这里直接用<h2>作为子元素，非标准结构可能导致浏览器渲染引擎在计算布局时出现异常，尤其是不同宽度下的适配逻辑混乱。
• 固定像素偏移的适配缺陷：top: -40px和top: -150px都是硬编码的固定像素值，无法适配不同屏幕尺寸，全屏状态下这种固定偏移会打破原本的居中布局逻辑，引发错位。

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