Html 试图在一个有不对称边（倾斜矩形）的div中写入文本，但它'；它在两条线之间延伸，为什么？

这是我试图做的代码：

为什么我的标题：你好，世界！抓住两条线而不是一条？我试着在

.menu header

类中使用width，但没有任何区别

这是html部分：

<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>

你可以用

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

但我不确定这是否是你想要的

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