title: Rotate text out of control
body: <p>I rotate a h4-tag like this:</p>
  
  <pre><code>.c_kolumnen h4{
      text-transform: uppercase;
      color:gray;
      transform: rotate(-90deg);
      text-align: center;
  
  }
  </code></pre>
  
  <p>and the parent-container of it has these values:</p>
  
  <pre><code>.c_kolumnen {
    background: #fff;
    min-height: 300px;
    width: 8.33333%;
    font-size: 1em;
    margin: 0;
    display: inline-block;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  </code></pre>
  
  <p>Now I do have 2 problems with the rotated text: </p>
  
  <ul>
  <li>a. It's 2-lined even though the value needs way less space then it
  has.</li>
  <li>b. It doesn't horizontally (I am not sure if horizontally is the
  right name for it, because I obviously twisted things) align at all.</li>
  </ul>
  
  <p>See the screenshot therefore, please.
  <img src="https://i.stack.imgur.com/1uGYv.png" alt="Screenshot of the container and the h4-element"></p>
  
  <p>What did I do wrong there?</p>