responsive design html out of place - css

Question

I am trying to place in the correct order the mega menu for every screen or at least for the most common pc / laptop screens, but however, it looks like this. I am using twitter bootstrap 4 for this task
I want to keep the mega menu below the dropdown carpet without getting out of place
<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>Operationalize Zero Trust</li>
</ul>
</div>
<div class="nav-group" style="border-bottom:none;">
<h4>Industries</h4>
<ul class="list-items space-0">
<li>Financial Institutions</li>
<li>Law Firms</li>
<li>Retail/PCI</li>
<li>Federal</li>
<li>Airlines</li>
<li>Healthcare</li>
</ul>
</div>
</div>
<div class="col-sm-4" style="padding-right:0px;">
<div class="nav-group" style="border-bottom:none;">
<h4>Compliance & Risk</h4>
<ul class="list-items space-0">
<li>SWIFT</li>
<li>PCI</li>
</ul>
</div>
<div class="nav-group" style="border-bottom:none;">
<h4>Cloud</h4>
<ul class="list-items space-0">
<li>Amazon Web Services</li>
<li>Microsoft Azure</li>
<li>Google Cloud Platform</li>
<li>OpenStack</li>
<li>Multi-Cloud</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="nav-group">
<h4>Initiatives</h4>
<ul class="list-items space-0">
<li>Container Segmentation</li>
<li>Environmental Separation</li>
<li>Application Segmentation</li>
<li>Securing Application Migration</li>
<li>User Segmentation</li>
<li>Encrypting Data in Motion</li>
<li>Securing Microsoft Applications</li>
<li>Secure a New Data Center</li>
</ul>
</div>
</div>
</div>
</div>
</ul>
</li>