НЕ работает width в % при увеличение

.menu { 
  display: flex; 
  justify-content: space-between; 
} 
 
.menu__list { 
  position: relative; 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  background-color: #86bc42; 
  display: flex;  
} 
 
.menu__list_left { 
  width: 20.12%; 
  padding: 20px 10px; 
  margin: 5px 0; 
  margin-right: 60px; 
} 
 
.menu__list_left::before { 
  content: ''; 
  top: 0; 
  left: 100%; 
  position: absolute; 
  width: 35px; 
  height: 100%; 
  background: linear-gradient(114deg, #86bc42 50%, transparent 51%, transparent 100%); 
   
} 
 
.menu__list_right { 
  padding: 20px 25px; 
  flex-grow: 1; 
} 
 
.menu__list_right::before { 
  content: ''; 
  top: 0; 
  right: 100%; 
  position: absolute; 
  width: 35px; 
  height: 100%; 
  background: linear-gradient(294deg, #86bc42 50%, transparent 51%, transparent 100%); 
} 
 
.menu__link { 
  display: block; 
  font-size: 14px; 
  font-family: 'Helvetica', sans-serif; 
  color: #ffffff; 
  text-decoration: none; 
} 
 
.menu__list_right  .menu__link{ 
  padding: 5px 20px; 
  border: 1px solid #ffffff; 
  border-radius: 7%; 
} 
 
.menu__list_right  .menu__link { 
  margin-right: 10px; 
}

<nav class="menu clearfix"> 
  <ul class="menu__list menu__list_left"> 
    <li class="menu__item"><a href="" class="menu__link">Lorem, ipsum.</a></li> 
  </ul> 
  <ul class="menu__list menu__list_right"> 
    <li class="menu__item"><a href="" class="menu__link">Lorem, ipsum.</a></li> 
    <li class="menu__item"><a href="" class="menu__link">Lorem, ipsum.</a></li> 
    <li class="menu__item"><a href="" class="menu__link">Lorem, ipsum.</a></li> 
    <li class="menu__item"><a href="" class="menu__link">Lorem, ipsum.</a></li> 
  </ul>  
</nav>