Как остановить элементы, перемещающие другие элементы, когда они расположены абсолютно?

Question

Используя css, я пытаюсь расположить раскрывающееся меню на мобильном телефоне, но есть некоторые проблемы.

1. Я повернул его на 270 градусов, и это оставило пробел после него справа, что увеличивает ширину страницы.

2. Я бы хотел расположить его абсолютно, но для этого требуется отрицательное поле слева или поле справа, что перемещает голову, разделяющую голову и тело вправо.

Так я должен позиционировать его абсолютно, остановить пробел, появляющийся слева, и остановить его перемещение других элементов?

Я пробовал чтобы уменьшить его ширину, что не имеет никакого эффекта, и чем дальше влево я перемещаю его, тем дальше влево серая линия, разделяющая голову и тело, идет.

Вот моя работа CSS.

@media(max-width: 768px). {
  .dropdown {
    position: absolute;
    transform: rotate(270deg);
    right: 50% 
    margin-left: 110px;
  }
}

HTML

<i class="fa fa-bars"></i>
                        </div>

                        <div class="module-group right">    
                            <div class="module left">


<div class="collapse navbar-collapse navbar-ex1-collapse">  
 <ul id="menu" class="menu"><li id="menu-it
   em-3530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3530 dropdown"><a title="Contact" href="https://4309.co.uk/contact/">Contact 
<ul role="menu" class=" dropdown-menu">
    <li id="menu-item-12515" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12515"><a title="DRAWING DEVELOPMENT" href="https://4309.co.uk/drawing-development/">DRAWING DEVELOPMENT</a></li>
    <li id="menu-item-2997" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2997"><a title="SKETCHES" href="https://4309.co.uk/sketches-life-drawing/">SKETCHES</a></li>

Вот ссылка на мой личный сайт

В принципе я тоже пытаюсь это сделать устройство, совместимое со всеми мобильными телефонами (отзывчиво)

Есть также некоторые побочные проблемы, которые заключаются в том, что один из пунктов меню перемещается по странице на некоторых устройствах.

Когда меню открыто, существует большое белое пространство, когда закрытое пространство исчезает.

Меню также перемещается в зависимости от того, на какой странице вы находитесь, не зная, как это происходит.