缩小屏幕时文本向左溢出屏幕的Bootstrap布局适配问题

窄屏下内容左溢出完全是硬编码固定偏移导致的：

• 你给h1设置了right: 6.8rem，相对定位下正值right属性会强制元素相对原位置向左偏移6.8rem
• 给按钮类.btnposition设置了right: 7rem，同样会把两个按钮向左硬推7rem
• 桌面端屏幕宽，这点偏移不会出界，到了移动端窄屏，容器本身宽度只有几百像素，固定rem偏移直接把元素推出屏幕左边界
• 额外两个会加重布局问题的错误：一是HTML里.container-fluid闭合后多写了一个冗余</div>，会打乱Bootstrap栅格的正常渲染；二是你只给列加了col-lg-6的大屏规则，小屏幕下列默认占满整行，搭配固定偏移必然溢出。

1. 先删掉HTML里.container-fluid闭合标签后多余的那个</div>，修正DOM结构。
2. 不要全局写死right偏移，如果要保留桌面端的位置效果，把偏移规则放进媒体查询，仅在屏幕宽度≥992px（Bootstrap lg断点）时生效，小屏下偏移自动归零：

h1 {
  position: relative;
  top: 3.125rem;
  /* 移除全局设置的right: 6.8rem */
  font-weight: 300;
  font-size: 3.5rem;
  line-height: 1.5;
  color: white;
  letter-spacing: 2px;
  padding-bottom: 4rem;
}

.btnposition {
  position: relative;
  top: 1rem;
  /* 移除全局设置的right: 7rem、bottom: 12.5rem */
}

/* 仅大屏下生效位置偏移 */
@media (min-width: 992px) {
  h1 {
    right: 6.8rem;
  }
  .btnposition {
    right: 7rem;
    bottom: 12.5rem;
  }
}

3. 给文本容器加个换行兜底，避免长文本撑破容器：

.text-and-button {
  overflow-wrap: break-word;
}

4. 后续调整位置优先用Bootstrap自带的响应式间距类（比如mt-3、pe-5这类），不要自己硬编码固定偏移值，天然适配多尺寸屏幕。

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