Instead of setting the width to inherit, there may be a better solution. Without "sticky," unexpected things can occur.

To address this issue, I've introduced an additional div to encapsulate your top section in question. It's important to maintain padding for the top section with the image when transitioning from sticky to non-sticky. This approach separates it from the resume download button, eliminating the need to specify a width on that particular div.

HTML (Include the added "left-block-padding" div)

<div class="container">
<div class="row justify-content-between">
  <div class="col-lg-3 col-xl-3 any_block"><div class="empty_row left_block" style="background-color: #1FA184;">
        <div class="left-block-padding">
            <div class="avatar" onmouseover="hover();" onmouseout="normal();">
              <span class="avatar_simple">
                <img  src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
              </span>
              <span class="avatar_quantum_break">
                <img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
              </span>
            </div>
            <div class="info">
              <h2 class="text_uppercase">Sergio Ramos</h2>
              <p class="text_muted">Front End Developer</p>
              <ul class="social_links">
                <li>
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-github"></i>
                  </a>
                </li>
              </ul>
            </div>
    </div>
            <div class="download_resume">
              <div class="text_widget">
                <center>
                  <a href="#" class="btn btn-primary btn-lg btn_link">Download CV</a>
                </center>
              </div>
            </div>
          </div></div>
  <div class="col-lg-8 col-xl-8 other_block">
    <div class="main_wrap">text</div>
  </div>
</div>
</div>

CSS (Introduce .left-block-padding and remove position:absolute; and width: 100%; from .download_resume)

.other_block {
  background-color:lightblue;
}
.main_wrap {
  margin-top:15px;
  background-color:pink;
  height:600px;
}

.home_link , .main_text {
    color: #fff;
    font-size: 1.5em;
}
.left_block {
  /*height: 60%;*/
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2); 
}
.avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
  position: absolute;
  display: block;
  text-align:center;
  transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
  border-radius: 50%;
  display: inline-block;
}
.info {
  margin-top: 33px;
}
.text_uppercase {
  text-transform: uppercase;
  color: #fff;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 15px;
}
.text_muted {
  text-align: center;
  opacity: 0.65;
}
.social_links {
  display: flex;
  justify-content: center;
}
.social_links li {
  list-style-type: none;
  margin: 5px 12px;
  vertical-align: middle;
}
.social_links li a {
  color: #fff;
  cursor: pointer;
  transition: all .2s ease-out;
  background-color: transparent;
}
.social_links li a i {
  font-size: 1.25em;
  transition: all .2s ease-out;
}
.social_links li a i:hover {
  opacity: 0.65;
}
.download_resume {
  left: 0%;
  padding: 30px;
  margin: 0;
  font-size: .875em;
  background-color: #313C42;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}

.text_widget {
  vertical-align: middle;
}
.text_widget a {
  background-color: #DEC746 !important;
  border-color: #DEC746 !important;
  color: #000 !important;
  font-size: 15px !important;
  padding: 12px 30px !important;
  border-radius: 35px !important;
}
center {
  display: block;
  text-align: -webkit-center;
}
.btn_link:hover, .share-btn:hover {
  box-shadow: -1px 2px 4px rgba(0,0,0,.25);
}
.btn_link {
  font-weight: 700 !important;
}
.sticky {
  position: fixed !important;
  top: 2%;
  width: 285px;
}

.left-block-padding {
  padding: 30px 20px 20px;
}

JS (No changes made)

// this function change img like hover effect using js
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");

avatarQuantumBreak.style.opacity = "0";

let hover = () => {
    avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
    avatarQuantumBreak.style.opacity = "0";
}
// this function adding sticky class to our empty_row block make it position fixed
window.onscroll = function() {
  let w = document.documentElement.clientWidth;
  if (w > 940) {
     var scrolled = window.pageYOffset || document.documentElement.scrollTop;
     scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
  }
}

https://codepen.io/adprocas/pen/QmLjJM