CSS响应式布局问题咨询：桌面端偏差与紫色区块控制

1. 紫色区块的成因与解决 #

那个紫色区块是浏览器默认的HTML背景色，因为你给.main设置了display: inline-flex，它属于行内级元素，不会自动填满父容器（body）的宽度。当窗口宽度大于.main的实际宽度时，.main右侧就会露出HTML的默认背景色。

控制方法：把.main的display: inline-flex改成display: flex，让它成为块级flex容器，自动撑满body的可用宽度，就不会露出外部背景色了。

2. 桌面端布局缺失的必要设置 #

你的桌面端布局主要有以下几个问题，补充/修改对应的CSS即可匹配目标效果：

• 标题独占一行：目标图里h1是跨两列的，需要给h1添加width: 100%，让它在flex容器里独占一行，下面的两个卡片自然并排。
• 容器布局修正：.main不需要flex-wrap: wrap（桌面端保持两列不换行），同时去掉inline-flex改为flex，确保容器撑满宽度。
• 卡片宽度控制：.card的max-width: max-content会让卡片宽度只适应内容，导致布局松散，改成flex: 1同时设置min-width: 350px（保证最小宽度，避免过窄），或者用max-width: calc(50% - 2.5rem)（配合column-gap:5rem，让两个卡片各占一半宽度减去间隙的一半）。
• Logo显示修正：.logo-container设置了max-height:50px，但.logo的max-width:20rem没有限制高度，会导致logo被拉伸/压缩，给.logo添加max-height: 100%，让它自适应容器高度。
• 浮动元素的容器高度：给.card添加overflow: hidden，确保卡片能包含内部的浮动图片，避免布局错乱。

修改后的完整CSS代码 #

body {
  font-family: "Poppins", sans-serif;
  margin: 50px 50px 0 50px;
  background-color: #faf9f6;
  display: flex;
  flex-direction: column;
  min-height: 95vh;
}
.main {
  display: flex; /* 替换inline-flex */
  flex: 1;
  flex-direction: row;
  column-gap: 5rem;
}
.logo {
  max-width: 20rem;
  max-height: 100%; /* 新增，适配容器高度 */
}

.logo-container {
  max-height: 50px;
}

.card {
  flex: 1;
  text-align: start;
  min-width: 350px; /* 新增，保证最小宽度 */
  overflow: hidden; /* 新增，包含浮动元素 */
}

.preview {
  max-width: 100%;
}

.left .tile-image, .right .tile-image { /* 合并重复样式 */
  max-height: 260px;
  float: left;
  margin-right: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 6.5rem;
  max-width: 1200px;
  width: 100%; /* 新增，独占一行 */
}

span {
  color: midnightblue;
}

footer {
  clear: both;
  text-align: right;
  color: midnightblue;
}

p {
  font-size: 1.25rem;
}

@media (max-width: 680px){
  h1 {
    font-size: 3rem;
    text-align: center;
  }

  .left .tile-image, .right .tile-image { /* 合并重复样式 */
    max-width: 100%;
    float: none; /* 修改，移动端图片独占一行 */
    margin-right: 0;
    margin-bottom: 10px;
  }

  .logo {
    max-width: 6rem;
  }

  .card {
    flex: 1;
    text-align: start;
    max-width: 100%;
    min-width: auto; /* 移动端取消最小宽度 */
  }

  p {
    font-size: 1rem;
  }
  
  span {
    color: midnightblue;
  }
  
  footer {
    clear: both;
    text-align: right;
    color: midnightblue;
  }
}

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