Содержимое в элементе полной ширины должно быть в контейнере

Question

Когда я говорю о " container ", это элемент, определенный следующим образом:

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

, который применяется несколько раз с целью, чтобы у большинства элементов был один и тот же левыйи вправо для больших экранов.Что касается этих вопросов, пожалуйста, не обращайте внимания на меньшие изображения, чем на рабочем столе.

Проблема, с которой я столкнулся, - это когда мне нужен элемент полной ширины, который разделен на два столбца.И содержимое этих 2 столбцов должно соответствовать одинаковым левым и правым границам, поэтому только фон имеет полную ширину, а их содержимое - нет.

Мой текущий код приводит к чему-то вроде этого

и должно выглядеть так

(в фактическом коде левый элементвместо фона у меня есть изображение, поэтому я не могу подделать фон с градиентом или подобным.)

Я пробовал разные вещи и а) не знаю, как правильно искать это, и б) могуне могу понять это самостоятельно.

В приложении приведен рабочий пример текущего кода.Разметка не установлена ​​в камне, поэтому не стесняйтесь добавлять элементы.

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) и сокращает оставшуюся ширину пополам, чтобы разделить левое и правое пространство поровну.

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>