Flexbox布局中#header-content紫色异常占位块问题排查

#header-content里的紫色异常占位块是三个问题叠加导致的：

• 外边距方向写反：你给图片占位容器#image-1加的margin-right: 100px是在元素右侧留空白，根本达不到「左侧文本和右侧图片之间隔100px」的效果，反而会让图片块靠左堆，在容器右侧留出大块无内容空隙。
• 浏览器默认样式没清：你只给导航链接写了基础的白色样式，没有覆盖浏览器默认的已访问链接紫色高亮，部分Chrome/Edge浏览器会给href="#"的空锚点加紫色访问标记，加上Flex容器默认的拉伸对齐规则，这个紫色标记会溢出导航栏，落到下面#header-content的空白区域，就是你看到的异常色块。
• 布局规则不全：你没给Flex子项设置对齐规则、也没给图片占位块设固定尺寸，不同视口下内容会乱挤，进一步放大色块异常的视觉效果。

1. 删掉#image-1上错误的margin-right: 100px，直接给#header-content加gap: 100px设置子项间距，比手动加margin不容易出方向错；再加align-items: center让两个子项垂直居中，避免默认stretch拉伸导致的样式溢出。
2. 全局加基础重置，清掉浏览器默认的内外边距、盒模型规则，同时给a标签的四个状态（未访问/已访问/悬停/点击）统一设白色，彻底干掉默认紫色访问态。
3. 给图片占位块设固定宽高、占位背景，加flex-shrink: 0禁止被压缩，避免内容撑开错位。

/* 全局重置，干掉浏览器默认边距和盒模型问题 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#header {
    background-color: #343c63;
    min-height: 400px; /* 用min-height代替固定高度，内容多了不会溢出 */
}

.main-nav {
    display: flex;
    padding: 20px 100px;
    list-style: none;
}

.main-nav li:first-child {
    margin-right: auto;
}

/* 覆盖链接所有状态的默认样式，彻底去掉紫色访问态 */
.main-nav a,
.main-nav a:link,
.main-nav a:visited,
.main-nav a:hover,
.main-nav a:active {
    margin: 10px;
    color: #fff;
    text-decoration: none;
}

#header-content {
    display: flex;
    align-items: center;
    gap: 100px; /* 直接设两个子项的间距，不用写margin */
    padding: 80px 100px;
}

/* 左侧文本块设宽度上限，避免长文本撑乱布局 */
.header-text {
    max-width: 500px;
    color: #fff;
}

.header-text h1 {
    margin-bottom: 16px;
    font-size: 48px;
    font-weight: 900;
}

#image-1 {
    width: 450px;
    height: 220px;
    background-color: #6d7499;
    /* 让占位文本居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0; /* 宽度不够时也不压缩图片占位块 */
}

对应的HTML部分只需要给左侧包裹文本的div加个class="header-text"即可，其他结构不用动，改完之后紫色块会完全消失，布局在不同屏幕宽度下也更稳定。

写Flex布局小提示：子项间距优先用gap实现，不要随便给单个元素加左右margin，很容易出现方向写反、间距计算错误的问题。

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