title: Sidebar - text is overlaping the bar
body: <p>This left sidebar text is transfixing the bar where is suppose to be.
  Need help to position the text within the compartments (li) without overlaping it. Just need to adjust it.
  I already have font-size %, but still not working.
  Thank you!</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>.menuleft {
      background-color: #CDD0D2;
      list-style-type: none;
      position: absolute;
      width: 9%;
      height: 100%;
      display: table;
  }
  .menuleft ul{
      display: table-cell;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      vertical-align: middle;
  }
  .text {
      -webkit-box-shadow: inset -1.3vw 0.8vw 5px 0px rgba(0,0,0,0.22);
      -moz-box-shadow: inset -1.3vw 0.8vw 5px 0px rgba(0,0,0,0.22);
      box-shadow: inset -1.3vw 0.8vw 5px 0px rgba(0,0,0,0.22);
      width: 100%;
      height: 17%;
      font-size: 2.5vw;
      color: white;
      text-align: center;
      text-decoration: none;
      background-color: #F06D22;
  }
  .menuleft li a {
      font-family: Futura LT,'Trebuchet MS', Arial;
      font-size: 80%;
      letter-spacing: 0.28vw;
      color: #fff;
      text-decoration: none;
      height: 100%;
      text-align: center;
      display: flex;
      vertical-align: middle;
      align-items: center;
      justify-content: center;
      width: 100%;
      writing-mode: tb-rl;
      -webkit-transform:rotate(180deg);
      -moz-transform:rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform:rotate(180deg);
      transform: rotate(180deg);
      white-space:nowrap;
  }
  
  .menuleft li:hover {
      text-decoration: none;
      background: #0094D4;
  }
  .menuleft li a:hover {
      text-decoration: none;
      color: #fff;
  }
  
  .whitebar{
      text-decoration: none;
      display: table;
      width: 100%;
      height: 0.5%;
      background-color: #fff;
      writing-mode:tb-rl;
      -webkit-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform:rotate(90deg);
      transform: rotate(180deg);
      white-space:nowrap;
      bottom:0;
      margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="menuleft"&gt;
          &lt;ul&gt;
              &lt;li class="text"&gt;
                  &lt;a href="#"&gt;Eficácia&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="whitebar"&gt;
              &lt;/li&gt;
              &lt;li class="text"&gt;
                  &lt;a href="#"&gt;Rapidez&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="whitebar"&gt;
              &lt;/li&gt;
              &lt;li class="text"&gt;
                  &lt;a href="#"&gt;Impacto &lt;br&gt; na vida real&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="whitebar"&gt;
              &lt;/li&gt;
              &lt;li class="text"&gt;
                  &lt;a href="#"&gt;Tecnologia &lt;br&gt; avançada&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="whitebar"&gt;
              &lt;/li&gt;
              &lt;li class="text"&gt;
                  &lt;a href="#"&gt;Segurança&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>