How to automatically calculate container padding based on header margin?

I have a max-width header: 1240px; This is aligned in the center of the screen with margin left and right auto. My problem is that I have a full width container with two columns inside, so the container with its content is not aligned with the header.

What I did was padding each column until it matches the header alignment but it doesn't seem like a good solution. Whenever the page size changes, the padding changes too ...

My question is, can I calculate the padding automatically based on the header margin? So I would have the contents of the container (col_left and col_right) aligned with the header.

If this is not possible, can there be other solutions to do this? I appreciate any help and thank you for any replies.

My idea:

body {
  margin: 0;
  padding: 0;
}

.main_container {
  display: flex;
}

.col_left {
  width: 20%;
  background: gray;
  padding-left: 309px;
  display: flex;
  flex-direction: column;
  padding-right: 20px;
  height: 100vh;
}

.col_right {
  width: 100%;
  padding-right: 311px;
  padding-left: 20px;
  background: blue;
}

/** Header Menu **/
.menu_container {
  background: black;
}

header {
  display: flex;
  padding: 20px;
  background: red;
  max-width: 1240px;
  margin: 0 auto;
}

ul#menu {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#menu li {
    background-color: #FF831C;
    border-bottom: 5px solid #54BAE2;
    display: block;
    margin: 2px;
    float: left; /* elementi su singola riga */
}
ul#menu li a {
    color: #fff;
    display: block;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}
ul#menu li.active, ul#menu li:hover {
    background-color: #54BAE2;
    border-bottom: 5px solid #FF831C;
}

<div class="menu_container">
  <header>
   <ul id="menu">
      <li><a href="#">Home</a></li>
      <li class="active"><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
 </header>
</div>

<div class="main_container">
  <div class="col_left">
    <div class="main_container">Content 1 Here</div>
    <div class="main_container">Content 1 Here</div>
    <div class="main_container">Content 1 Here</div>
  </div>
  <div class="col_right">
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
  </div>
</div>

Solution

Use calc() and don't forget box-sizing: border-box to your elements

calc((100vw - 800px)/2);

I am using 800px for the demo but replace it with your real value

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.main_container {
  display: flex;
}

.col_left {
  width: 35%;
  background: gray;
  display: flex;
  flex-direction: column;
  padding-left: calc((100vw - 800px)/2);
  height: 100vh;
}

.col_right {
  width: 65%;
  padding-right: calc((100vw - 800px)/2);
  padding-left: 20px;
  background: blue;
}

/** Header Menu **/
.menu_container {
  background: black;
}

header {
  display: flex;
  padding: 20px;
  background: red;
  max-width: 800px;
  margin: 0 auto;
}
ul {
  list-style:none;
  display:flex;
}

<div class="menu_container">
  <header>
   <ul id="menu">
      <li><a href="#">Home</a></li>
      <li class="active"><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
 </header>
</div>

<div class="main_container">
  <div class="col_left">
    <div class="main_container">Content 1 Here</div>
    <div class="main_container">Content 1 Here</div>
    <div class="main_container">Content 1 Here</div>
  </div>
  <div class="col_right">
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
    <div class="main_container">Content 2 Here</div>
  </div>
</div>