新手前端求助：如何复刻目标网站的Header布局（附代码）

请补充以下关键信息，方便快速定位问题：

• 贴出你的HTML代码片段（用html 代码块包裹）
• 贴出你的CSS代码片段（用css 代码块包裹）
• 插入当前效果截图：
• 插入目标效果截图：
• 明确说明具体差异点，比如导航栏布局错位、样式（字体/颜色/间距）不符、响应式状态异常等

同时，作为新手可以先自查几个常见问题：

• 是否给元素设置了box-sizing: border-box，避免盒模型计算偏差
• Header的定位方式（position: fixed/sticky等）是否和目标一致
• 元素的margin、padding值是否设置正确
• 字体的字号、字重、字体族是否匹配目标效果

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