Cannot place full width content in container with sided content?

Issue

I am trying to create a full-width content for my site, but there is some unbalanced-sided content(left catalog and right toolbar).

so the current workaround from here, it is said that it doesn't work for my case.

This is what i am trying to do,

.alignfull {
  margin: 32px calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
  background: yellow;
}

#container {
  height: 100vh;
  display: flex;
}

#container-left {
  padding: 0 30px;
  width: 20%;
  height: 100%;
  background: red;
}

#container-center {
  padding: 0 30px;
  width: 100%;
  height: 100%;
  background: pink;
}

#container-right {
  padding: 0 30px;
  width: 10%;
  height: 100%;
  background: blue;
}

<div id="container">
  <div id="container-left">
    left catalog
  </div>
  <div id="container-center">
    Title for center content:
    <div class="alignfull">
      full width content
    </div>
    after the full width, other content in center

  </div>
  <div id="container-right">
    right sidebar
  </div>
</div>

I expect the yellow area can be across the left side to the right side,

but it turns out like it:

Solution

Do you mean something like this?

.alignfull {
  margin: 32px calc(46% - 50vw);
  max-width: 100vw;
  width: 100vw;
  background: yellow;
  position: relative;
  padding: 10px;
}

#container {
  height: 100vh;
  display: flex;
}

#container-left {
  padding: 0 30px;
  width: 20%;
  height: 100%;
  background: red;
}

#container-center {
  padding: 0 30px;
  width: 100%;
  height: 100%;
  background: pink;
}

#container-right {
  padding: 0 30px;
  width: 10%;
  height: 100%;
  background: blue;
}

<div id="container">
  <div id="container-left">
    left catalog
  </div>
  <div id="container-center">
    Title for center content:
    <div class="alignfull">
      full width content full width contentfull width contentfull width contentfull width contentfull width contentfull width content full width contentfull width contentfull width contentfull width contentfull width contentfull width content
    </div>
    after the full width, other content in center

  </div>
  <div id="container-right">
    right sidebar
  </div>
</div>

Answered By - Crystal