адаптивный дизайн html не к месту

Question

Я пытаюсь разместить в правильном порядке мегаменю для каждого экрана или хотя бы для самых распространенных экранов p c / ноутбука, но, тем не менее, это выглядит так. Я использую твиттер bootstrap 4 для этой задачи

Я хочу держать мега-меню под выпадающим ковром, не убираясь с места

<li class="header__el open">
   <a href="#" class="header__link dropdown-toggle" data-toggle="dropdown"
      aria-expanded="true">header__link<b class="caret"></b></a>
   <ul class="dropdown-menu dropdown-menu-large row" x-placement="bottom-start"
      style="position: absolute;will-change: transform;top: 3rem;left: 10rem;margin: 1em;margin-left: 37%;transform: translate3d(23px, 22px, 0px);">
      <div class="container-fluid">
         <div class="row">
            <div class="col-sm-4">
               <div class="nav-group" style="margin-bottom:10px; border-bottom:none;">
                  <a href="#solutions-zero-trust-security?hsLang=en">
                     <h4>Zero Trust</h4>
                  </a>
                  <ul class="list-items space-0">
                     <li><a href="#">Operationalize Zero Trust</a></li>
                  </ul>
               </div>
               <div class="nav-group" style="border-bottom:none;">
                  <h4>Industries</h4>
                  <ul class="list-items space-0">
                     <li><a href="#">Financial Institutions</a></li>
                     <li><a href="#">Law Firms</a></li>
                     <li><a href="#">Retail/PCI</a></li>
                     <li><a href="#">Federal</a></li>
                     <li><a href="#">Airlines</a></li>
                     <li><a href="#">Healthcare</a></li>
                  </ul>
               </div>
            </div>
            <div class="col-sm-4" style="padding-right:0px;">
               <div class="nav-group" style="border-bottom:none;">
                  <h4>Compliance &amp; Risk</h4>
                  <ul class="list-items space-0">
                     <li><a href="#">SWIFT</a></li>
                     <li><a href="#">PCI</a></li>
                  </ul>
               </div>
               <div class="nav-group" style="border-bottom:none;">
                  <h4>Cloud</h4>
                  <ul class="list-items space-0">
                     <li><a href="#">Amazon Web Services</a></li>
                     <li><a href="#">Microsoft Azure</a></li>
                     <li><a href="#">Google Cloud Platform</a></li>
                     <li><a href="#">OpenStack</a></li>
                     <li><a href="#">Multi-Cloud</a></li>
                  </ul>
               </div>
            </div>
            <div class="col-sm-4">
               <div class="nav-group">
                  <h4>Initiatives</h4>
                  <ul class="list-items space-0">
                     <li><a href="#">Container Segmentation</a></li>
                     <li><a href="#">Environmental Separation</a></li>
                     <li><a href="#">Application Segmentation</a></li>
                     <li><a href="#">Securing Application Migration</a></li>
                     <li><a href="#">User Segmentation</a></li>
                     <li><a href="#">Encrypting Data in Motion</a></li>
                     <li><a href="#">Securing Microsoft Applications</a></li>
                     <li><a href="#">Secure a New Data Center</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </ul>
</li>