title: Css issue bars to move left to right on percentage bassis
body: <p>I am trying to create a graoh to show positive and negative value by percentage so if value will be negative it will be red bar if value will be positive it will run red bar so the thing is that I am having issue when I set width to 46 or 50% the bar is showing to be of full size as it shouldn't be can anyone help me out with this please</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    position: relative;
    width: 400px;
    height: 30px;
    background-color: #333
  }
  
  .bar_red {
    background-color: #d40216 !important;
    left: 50%;
    width: 13%;
    max-width: 180px;
  }
  
  .bar_green {
    right: 50%;
  }
  
  .bar_green,
  .bar_red {
    width: 42%;
    height: 20px;
    background-color: #88c500;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;div class="bar_red" style="width: 50%;"&gt;&lt;/div&gt;
    &lt;div class="bar_green" style="width: 50%;"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/vck8wchh/" rel="nofollow noreferrer">https://jsfiddle.net/vck8wchh/</a></p>