移动端网页头部显示异常，如何用Media Queries优化适配？

需要添加媒体查询断点来修复移动端显示异常的问题，具体修改内容如下：

1. 清理HTML中的内联定位样式 #

移除两个.link元素上的内联left/right样式，避免固定定位干扰响应式布局：

<div class="header">
<a href="<cfoutput>#root#</cfoutput>">
    <img src="pictures/title-img-no-fade.png" style="max-height: 12vh;"/>
</a>

<div class="links" >
    <div class="link">
        <a href=""><b>INDIVIDUALS/<br>ENTHUSIASTS</b></a>
        <div class="options" style="padding: 16px 26px">            
            <a href="" >LOGIN/JOIN</a>              
            <a href="" >CHANGE <br>MAKERS</a>               
        </div>
    </div>
    <div class="link">
        <a href=""><b>BUSINESSES/<br>ORGANIZATIONS</b></a>
        <div class="options" style="padding: 16px 26px">            
            <a href="">LOGIN/JOIN</a>               
            <a href="">LEADERNPARD</a>              
            <a href="">IMPACT</a>               
            <a href="">PROCESS</a>              
            <a href="">GREEN <br>DIRECTORY</a>              
        </div>
    </div>
</div>

2. 添加媒体查询调整布局 #

在现有CSS末尾添加针对移动端的媒体查询（以768px为断点，可按需调整），修改网格和弹性布局规则：

.header{
--margin_lr:0em;
background-color: var(--green);
color: white;
margin: 0em;
padding: 1.2em var(--margin_lr);
display: grid;
min-height: 1vh;
justify-content: space-around;
align-content: center;
align-items: center;
justify-items: center;
grid-template-columns: 1fr 2fr;
}
.header .links{
display: flex;
align-content: center;
justify-content: space-around;
align-items: center;
justify-items: center;
max-width: 55vw;
flex-direction: row;
flex-wrap: wrap;
min-width: 95%;
}

/* 移动端适配断点 */
@media (max-width: 768px) {
  .header {
    grid-template-columns: 1fr; /* 标题占满整行，链接区移至下方 */
    gap: 1em; /* 增加标题与链接区的间距 */
  }
  .header .links {
    flex-direction: column; /* 链接垂直排列 */
    max-width: 100%; /* 占满容器宽度 */
    gap: 1.5em; /* 增加两个链接组的间距 */
  }
  .header .link a {
    font-size: 0.9em; /* 缩小移动端字体，避免换行混乱 */
  }
  .header img {
    max-height: 10vh; /* 适当缩小移动端标题图高度 */
  }
}

3. 可选优化：下拉菜单显示 #

如果移动端下拉菜单展开后布局混乱，可在媒体查询中补充：

@media (max-width: 768px) {
  /* ... 保留上面的代码 ... */
  .header .options {
    padding: 12px 20px; /* 缩小下拉菜单内边距 */
    text-align: center; /* 让下拉链接居中显示 */
  }
}

这些修改会让移动端头部从横向排列转为垂直堆叠，避免内容挤压溢出，同时保持核心功能可用。

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