Trying to write text in a div with asymmetric sides (slanted rectangle) but it's stretched between 2 lines, why?

Question

This is code what I'm trying to do: http://codepen.io/anatoly314/pen/Vebexq

Why my header: Hello World! catches two line instead of one? I've tried to play with width on .menu-header class but it didn't make any difference?

This is html part:

<div class="cell">
        <div class="menu-item box_shadow">
            <div class="menu-image-container"></div>
            <div class="menu-header-container">
                <span class="menu-header">Hello World!</span>
            </div>
            <div class="menu-content-container">
               <ul>
                  <li>First</li>
                  <li>Second</li>
                  <li>Third</li>
              </ul>
          </div>
       </div>
</div>

And CSS part:

.cell{
  min-height: 100vh;
  background-color: #FDDFD3;
  vertical-align: middle;
  display: flex;
  justify-content: center;
}

.menu-item{
  height: 80vh;
  background-color: grey;
  align-self: center;
  width: 20vw;
  border-radius: 25px;
}



.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px grey;
          box-shadow: 0px 0px 4px 0px grey;
}

.menu-image-container{
  height: 50%;
  background-color: #fff;
   border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

.menu-header-container{
  border-top: 40px solid white;
  border-right: 20vw solid yellow;
  height: 10%;
}

.menu-header{
    position: relative;
    left: 15vw;
    top: -5vh;
}

.menu-content-container{
  height: 40%;
  direction: rtl;
}

Answer 1

you can use

.menu-header {
    position: relative;
    left: 15vw;
    top: -5vh;
    white-space: nowrap;
}

but I'm not sure if this is what you want.