使用 flexbox 布局可完美实现：父容器设为 `display: flex` 并配合 `justify-content: center` 居中整体内容，再通过 `margin-left: auto` 将右侧图标“推”至菜单右侧，确保菜单视觉中心始终与页面中心重合。
在 Elementor（或任何现代前端场景）中，要实现「一个导航菜单始终水平居中，同时在其右侧紧邻显示一个 Instagram 图标」，关键在于分离“居中逻辑”与“排列逻辑”——不能依赖 text-align: center 或 float，因为它们会因右侧元素的存在而破坏居中基准。
✅ 推荐方案：Flexbox + 自动外边距（最简洁、语义清晰、响应友好）
.header-nav-wrapper {
display: flex;
justify-content: center; /* 整体内容在父容器中水平居中 */
align-items: center; /* 垂直居中（可选） */
gap: 16px; /* 菜单与图标间距（推荐替代 margin） */
}
.main-menu {
/* 不设宽度，自然包裹内容；Elementor 默认已适配 */
}
.instagram {
margin-left: auto; /* 关键！将图标“推”到菜单右侧，且不干扰菜单居中 */
}? 为什么这个方案优于其他方法？
- ✅ 菜单真居中：justify-content: center 作用于整个 flex 行，菜单的几何中心 = 父容器中心；
- ✅ 图标紧邻右侧：margin-left: auto 让图标自动占据剩余空间左侧，实现“贴靠”效果；
- ✅ 无宽度依赖：无需给菜单设 width: 100% 或 inline-block，兼容 Elementor 动态生成结构；
- ✅ 响应安全：gap 和 auto margin 在所有现代浏览器（含 Safari 14.1+）中稳定支持。
⚠️ 注意事项：
- 若在 Elementor 中自定义 CSS，请将上述样式添加至「自定义 CSS」字段或主题子样式表，避免被覆盖；
- 如需图标垂直对齐更精准，可对 .instagram a 添加 display: flex; align-items: center;；
- 避免对 .main-menu 使用 float、position: absolute 或 transform: translateX()，这些会破坏 flex 布局逻辑和居中基准。
总结：用 Flexbox 的 justify-content: center + margin-left: auto 组合，是解决「固定居中主体 + 右侧附属元素」布局问题的现代标准解法——简洁、可靠、无需 hack，且天然适配响应式需求。
