响应式HTML设计边距问题：762-991px尺寸下布局末端不对齐

你的判断没错，margin-right:10px就是导致第二部分无法对齐页面边缘的原因。在762-991px的断点中，第二列的.col元素设置了右侧margin，但没有针对最后一列做抵消处理，加上宽度计算没把这个margin纳入考量，导致整体布局右侧多出10px，和第三部分的对齐效果不一致。

给你两个可行的修复方案：

方案1：调整宽度计算并清除最后一列的margin #

修改中间断点的CSS规则，把margin纳入宽度计算，同时给每行最后一列去掉右侧margin：

@media (min-width:762px) and (max-width:991px) {
  .col {
    box-sizing: border-box;
    width: calc(50% - 5px); /* 平分宽度，减去一半的间距值 */
    margin-right: 10px;
  }
  /* 每行第二个列（偶数列）清除右侧margin */
  .col:nth-child(2n) {
    margin-right: 0;
  }
}

方案2：改用Flex布局简化间距管理 #

用Flex布局替代浮动，通过gap属性统一设置列间距，避免手动计算margin的麻烦：

@media (min-width:762px) and (max-width:991px) {
  .row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 直接设置列之间的间距 */
  }
  .col {
    width: calc(50% - 5px);
    margin-right: 0; /* 移除原来的margin-right */
  }
}

两种方案都能解决对齐问题，Flex布局的方式更简洁，后续维护也更方便。

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