Content within full width element should be containerized

Question

When I speak of "container", it is an element defined like so

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

this is applied on multiple occasions with the goal that most elements should have the same left and right bound for large screens. For the matter of this questions, please disregard smaller views than desktop.

The problem I have is when I want a full width element that is divided into two columns. And the contents of these 2 columns should adhere to the same left and right boundaries, so only the background is full width but their content not.

My current code results in something like this

and it should look like this

(In the actual code, the left element has an image instead of background-color, so I can't fake the background with gradient or similar.)

I tried various things and a) don't know how to properly search for this and b) can't figure it out on my own.

Attached is a working example of the current code. The markup is not set in stone, so feel free to add elements.

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>

UPDATE: I'm sorry if I was unclear, however the other answers are not helpful in this context. The problem are the 2 columns.

Having the outer element 100% and placing a .container inside messes up the columns. (I hope this explanation is clear, if not, please comment)

Answer 1

As per the comments, you can add calc((100vw - 300px) / 2) as padding-left of the left column and padding-right of the right column to achieve this. This formula is taking the full width of the page (100vw) minus the size of the middle column (300px), and cutting the remaining width in half in order to divide the left and right space equally.

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>