How to make the sidebar full width to completely fill one side only?

I have a container with max-width: 800px;, inside it there are two columns, col_1 and col_2, everything works as expected. For the initial code, if you put the page in full screen, col_1 is a long red column. To the left of the red column there is nothing, only white color. I want that white space to the left of col_1 to become the same color as col_1.

Update: Currently doing this with gradient background as recommended by user tobiv. But that's not always a good solution. For example, when loading pages, as the body tag is loaded first, the annoying gradient is displayed.

How can I achieve this goal?

Here is an example: https://www.uxlibrary.org/explore/ui-design/articles/design-systems

Here is the structure of my code:

body {
    background: linear-gradient(90deg, red 0%, red 50%, white 50%);
}

.container_one {
  display: block;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background: white;
}

.container_two {
  display: flex;
  width: 100%;
}

.col_1, .col_2 {
  display: flex;
  flex-direction: column;
}

/*Col Width */
.col_1 { 
  width: 20%; 
  border-right: 1px solid gray;
  padding-right: 15px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  background: red;
}

.col_2 { 
  width: 80%; 
  padding-left: 15px;
}

.element {
  background: #f3f3f3;
  margin: 5px 0; 
  padding: 10px;
}

<div class="container_one">
  <div class="container_two">
   <div class="col_1">
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
    </div>
    <div class="col_2">
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
    </div>
  </div>
</div>

Solution

I'm not sure if I understood your question, but here is an example:

HTML

<body>
  <div class="container">
    <div class="left-side--container">
      <div class="col_1">
        <span class="element">Element 1</span>
        <span class="element">Element 2</span>
        <span class="element">Element 3</span>
      </div>
    </div>
    <div class="col_2">
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
      <span class="element">Element 1</span>
      <span class="element">Element 2</span>
      <span class="element">Element 3</span>
      <span class="element">Element 4</span>
      <span class="element">Element 5</span>
    </div>
  </div>

  <body>

CSS

* { margin: 0; padding: 0;}

.container {
  display: flex;
  margin-left: 0;
  margin-right: auto;
}

.col_1, .col_2 {
  display: flex;
  flex-direction: column;
}

.left-side--container {
  display: flex;
  justify-content: flex-end;
  width: 30%;
  background: #FC664E;
}

.col_1 {
  width: 40%;
  border-right: 1px solid gray;
  padding-right: 15px;
  height: 100vh;
  background: red;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.col_2 { 
  width: 800px;
  padding-left: 15px;
  background: gray;
}

.element {
  padding: 10px;
  font-family: arial;
}

You only have to change #FC664E color to red.