全宽元素中的内容应该容器化

Question

当我说到“容器”时，它是这样定义的元素

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

这适用于多种场合，目标是大多数元素在大屏幕上应该具有相同的左右边界。对于此问题，请忽略小于桌面的视图。

我遇到的问题是当我想要一个分为两列的全宽元素时。并且这两列的内容应该遵守相同的左右边界，所以只有背景是全宽的，而它们的内容不是。

我当前的代码结果是这样的

它应该是这样的

（在实际代码中，左边的元素有一个图像而不是背景颜色，所以我不能用渐变或类似的方式伪造背景。）

我尝试了各种方法，a) 不知道如何正确搜索它，b) 无法自行解决。

附件是当前代码的工作示例。标记不是一成不变的，所以请随意添加元素。

header {
  box-shadow: 0 0 0.3125rem 0 rgba(28, 39, 44, 0.5);
}

.container {
  width: 90%;
  max-width: 300px;
  margin: 0 auto;
}

header>.container {
  display: grid;
  grid-template-columns: auto auto;
}

header>.container>*:last-child {
  text-align: right;
}

p {
  text-align: justify;
}

.alignfull {
  width: 100%;
  max-width: unset;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

#left {
  background-color: #eee;
  grid-column-end: span 7;
}

#right {
  background-color: #aaa;
  grid-column-end: span 5;
}

<header>
  <div class="container">
    <div>first left aligned</div>
    <div>last right aligned</div>
  </div>
</header>
<div id="main">
  <div class="alignfull">
    <div id="left">
      <div id="left-element">
        Hello World
      </div>
    </div>
    <div id="right">
      <div id="right-element">
        Lorem ipsum dolor sit amet,
      </div>
    </div>
  </div>
  <div class="container">
    <p>
      Cupcake ipsum dolor sit amet lemon drops tart halvah. Cookie brownie cupcake icing oat cake. Ice cream pie lemon drops ice cream caramels wafer jujubes carrot cake. Liquorice cheesecake topping danish. Toffee sweet pie gummi bears biscuit dessert topping.
      Macaroon gingerbread chocolate cake macaroon danish tart cheesecake danish cheesecake. Powder candy canes candy canes liquorice muffin cake gummies. Chupa chups pudding tart sesame snaps fruitcake cotton candy chocolate.
    </p>
  </div>
</div>

更新： 如果我不清楚，我很抱歉，但是其他答案在这种情况下没有帮助。问题是 2 列。

100% 使用外部元素并在内部放置 .container 会弄乱列。（我希望这个解释清楚，如果不明白，请评论）

Answer 1

根据评论，您可以将 calc((100vw - 300px) / 2) 添加为左列的 padding-left 和右列的 padding-right 来实现此目的。这个公式是用页面的全宽(100vw)减去中间栏的大小(300px)，把剩下的宽度减半，把左右space平分

html, body {
margin: 0;
padding:0;
}

header {
  box-shadow: 0 0 0.3125rem 0 rgba(28, 39, 44, 0.5);
}

.container {
  width: 90%;
  max-width: 300px;
  margin: 0 auto;
}

header>.container {
  display: grid;
  grid-template-columns: auto auto;
}

header>.container>*:last-child {
  text-align: right;
}

p {
  text-align: justify;
}

.alignfull {
  width: 100%;
  max-width: unset;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

#left {
  background-color: #eee;
  grid-column-end: span 7;
  padding-left: calc((100vw - 300px) / 2);
}

#right {
  background-color: #aaa;
  grid-column-end: span 5;
  padding-right: calc((100vw - 300px) / 2);
}

<header>
  <div class="container">
    <div>first left aligned</div>
    <div>last right aligned</div>
  </div>
</header>
<div id="main">
  <div class="alignfull">
    <div id="left">
      <div id="left-element">
        Hello World
      </div>
    </div>
    <div id="right">
      <div id="right-element">
        Lorem ipsum dolor sit amet,
      </div>
    </div>
  </div>
  <div class="container">
    <p>
      Cupcake ipsum dolor sit amet lemon drops tart halvah. Cookie brownie cupcake icing oat cake. Ice cream pie lemon drops ice cream caramels wafer jujubes carrot cake. Liquorice cheesecake topping danish. Toffee sweet pie gummi bears biscuit dessert topping.
      Macaroon gingerbread chocolate cake macaroon danish tart cheesecake danish cheesecake. Powder candy canes candy canes liquorice muffin cake gummies. Chupa chups pudding tart sesame snaps fruitcake cotton candy chocolate.
    </p>
  </div>
</div>

全宽元素中的内容应该容器化

Content within full width element should be containerized

html

css

width

grid-layout