Implementing plugin shortcode scrambles the page layout

Hi Jas, I need your help with the Gwebpro Store Locator plugin integration into WordPress page. (I am fine with the integration via php as well, just tell me where to put the code :D)

I am happy with the level of customizability – I have been able to customize the plugin as desired. However, I am struggling with the plugin integration with the rest of the layout – when activating the plugin on the page via the shortcode [GwebproStoreLocator], it results in various outcomes, none of which works well with the rest of the layout.

Here’s the link displaying how I want the outcome to look like:
https://dytest.assetdedication.com/find-an-advisor/
(There is a security certificate warning displayed due to SSL – please ignore the warning and continue to the page.)

This is the page with the similar plugin integrated. (Please ignore the plugin itself, just pay the attention on how it integrated with the rest of the page.)
– The page displays h1 heading with the grey background (full-width header), followed by the plugin area, followed by the footer at the bottom.
– The plugin area fits the whole space between the two margins.
– The margins of the plugin area are lined up with the left and right margins of the main header and the footer at the bottom.

The site is built on Divi 1.9.1 theme by Elegant Themes and WordPress 3.9.1

Here are the two outcomes after plugin integration:
1) Here is the layout after the Gwebpro plugin shortcode [GwebproStoreLocator] is copied to the Divi Theme page builder by simply replacing the previous plugin shortcode:
https://dytest.assetdedication.com/find-an-advisor-5/

– the heading with ‘Find an Asset Dedication Advisor'(grey stripe) is pushed to the bottom, below the plugin content area;
– the plugin content area (inner_lsb, containted in inner_wrap) is positioned on the top left (below the top header with identity at main navigation), right after the <script> tag, instead of below the h1 heading (<div class=”et_pb_section et_pb_fullwidth_section” style=”background-color:#808285;”>
<section class=”et_pb_fullwidth_header et_pb_bg_layout_dark et_pb_text_align_left”>) You will notice, that in the html of that page, plugin area container comes before the header/section container instead of after.
– the plugin area (front-end, map, search results) is lined up with the viewport margin, instead of lining up with left and right margins of the main navigation and footer at the bottom (as displayed on the https://dytest.assetdedication.com/find-an-advisor/ page);
– the right margin of the map is too far away from the right margin – after the plugin area is aligned to the left, and lined up to match the identity and bottom footer left margins, the map width should extend to the rest of the page, ie. its right margin should be lined up with the right margins of the main navigation and bottom footer.

2) Here is the layout after the page is created by adding the new page via standard WordPress page builder:
https://dytest.assetdedication.com/find-an-advisor-gwebpro/

Here, the plugin seemingly fits relatively well with the rest of the margins of the page. However,
– the headline needs to be adjusted to display the white text on the grey background, full width, like on the https://dytest.assetdedication.com/find-an-advisor/ page
– right sidebar needs to be removed, so the plugin would take up the whole width within the margins – right now, when the sidebar is hidden or display set to none, the plugin area is not expanded, and the map keeps the same width (even if it is set to 100% in the Store Locator settings).

Can you help me with this, so the plugin would fit nicely with the rest of the page layout? Whether you can help me by solving option 1) or 2), or providing me with the php code, I will be fine, as long as the final outcome is as on the https://dytest.assetdedication.com/find-an-advisor/ so I can ultimately copy the code to that page, mark this task as finished, and leave you a review for the code.

Thanks very much!