如何覆盖父级容器max-width外边距，让宽内容对齐body真实左边缘？

基础效果：对齐body左边缘（无需移出父容器） #

针对水平居中带max-width的主容器，你可以通过负边距直接抵消主容器的左外边距，核心原理是：居中主容器的左外边距固定等于视口宽度的一半 - 主容器自身宽度的一半，用CSS计算式可以直接拿到这个值：

/* 你要调整的大尺寸内容的类名 */
.bracket-content {
  /* 向左偏移的距离刚好等于主容器的左外边距 */
  margin-left: calc(-50vw + 50%);
  /* 可选：如果需要内容占满整个视口宽度就加这行，不需要则保留原内容宽度 */
  width: 100vw;
  /* 可选：内容过宽时允许内部横向滚动，避免页面整体出现横向滚动条 */
  overflow-x: auto;
}

注：使用前请先重置body的默认边距body { margin: 0; padding: 0; }，避免偏移量出现误差。

条件触发：仅内容溢出时生效 #

方案1：CSS容器查询（现代浏览器支持，Chrome 105+、Firefox 110+、Safari 16+） #

首先给主容器开启容器查询能力：

.main-container {
  max-width: 1200px; /* 替换为你实际的主容器最大宽度 */
  margin: 0 auto; /* 你原有的居中样式 */
  container-type: inline-size;
}

然后给目标内容加条件样式：

/* 默认状态：和其他内容对齐 */
.bracket-content {
  max-width: 100%;
  overflow-x: auto;
}

/* 仅当主容器达到最大宽度、且内容宽度超过容器可用宽度时，触发左对齐逻辑 */
@container (min-width: 1200px) {
  .bracket-content:has(> .inner-content) {
    margin-left: calc(-50vw + 50%);
    width: 100vw;
  }
}

方案2：JS兼容方案（适配所有浏览器） #

如果需要兼容旧版本浏览器，可以用JS动态判断内容宽度是否溢出，再调整样式：

const adjustBracket = () => {
  const mainContainer = document.querySelector('.main-container')
  const bracket = document.querySelector('.bracket-content')
  // 内容实际总宽度
  const contentWidth = bracket.scrollWidth
  // 主容器可用宽度
  const containerWidth = mainContainer.clientWidth

  if (contentWidth > containerWidth) {
    bracket.style.marginLeft = 'calc(-50vw + 50%)'
    bracket.style.width = '100vw'
  } else {
    bracket.style.marginLeft = '0'
    bracket.style.width = '100%'
  }
}

// 页面加载和窗口尺寸变化时重新计算
window.addEventListener('load', adjustBracket)
window.addEventListener('resize', adjustBracket)

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