调整屏幕尺寸时如何让文本图片与背景叠加层保持相同边距锚定左侧

当前布局错乱核心原因有两个：

• 外层使用Bootstrap默认.container类，该类会随响应式断点自动调整左右内边距和最大宽度，无法和自定义白色叠加层7.5%的左侧偏移量绑定对齐
• 文本、图片的对齐依赖固定比例的右内边距/外边距实现，未和叠加层左侧定位做统一适配，left属性未搭配position使用不生效

步骤1：调整容器对齐逻辑 #

给slider-invest模块下的container添加自定义样式，让容器左侧偏移和白色叠加层完全对齐：

.slider-invest .container {
  max-width: 100% !important;
  padding-left: 7.5% !important;
  padding-right: 0;
  margin: 0;
}

同时修改block的默认对齐属性：

.slider-invest .block {
  text-align: left;
}

步骤2：修改h1标题样式 #

删除原有右外边距规则，直接继承父容器对齐规则即可：

.slider-invest .block h1 {
  /* 移除原有margin-right: 52.5%规则 */
  margin: 0 0 5px 0;
}

步骤3：修改h3文本样式 #

删除原有冗余的左右边距规则：

.invest-slider-text {
  /* 移除原有padding-right: 57%、margin-left: 2%规则 */
  padding: 25px 20px 0 0;
  margin: 0;
}

步骤4：修改laurel图片样式 #

移除无效的left属性，宽度适配叠加层宽度即可：

.laurel {
  width: 36%;
  height: auto;
  padding-top: 30px;
  display: block;
}

调整完成后所有文本、图片的左侧基准线都会和白色叠加层的左侧基准线完全绑定，不管窗口宽度如何调整，两者的相对间距都会保持一致。

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