Helix Menu bootstrap settings

I found this CSS: .sp-page-builder .page-content #section-id-1688720184452 {margin-left: 80px;}

Hi.

This is not the right solution.

First, reset default modules margin in Header.

#sp-header .sp-module {
    margin-left: inherit;
}

Then find this module, go to the its settings and there, in the settings of the section you will find the margin settings. Now, it is there margin-left: 80px; is configured.

Change as you need.

But on screens less than 1200px, this will not solve the problem in any case.
The solution for such screens will be - switch to a hamburger via CSS before the default code does.

@media (max-width: 1199.98px) {
    .sp-megamenu-parent {
        display: none !important;
    }
    #sp-header.header-with-social #offcanvas-toggler.mega {
        display: inline-flex !important;
    }
}

Tip: Using the SPPB module for one button is excessive. You get a huge bunch of unnecessary code at the output.

Use Custom Joomla module and HTML/CSS to create a button.

Use custom.css file for your CSS code instead of template's Custom CSS field. Read Helix documentation about this