I got a small issue when i transform: scale my menu items

I have a menu like so:

<div class="menu">
  <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
   <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
   <div class="menu__item">
    <ul class="menu__item__link">
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
     <ul class="menu__item__links">
      <li>sub menu 1</li>
      <li>sub menu 2</li>
      <li>sub menu 3</li>
      <li>sub menu 4</li>
    </ul>
  </div>
</div>
<h2>Some text here</h2>

https://jsfiddle.net/takebyfy/

when i transform: scale my menu items the h2 a the bottom is moving to the right. I have some another pages with this menu and i dont want to move elements at the bottom of menu. When menu scaling it must hover elements at the bottom.