block navigation mega menu 3 issue

As I am just starting on a design for a new website I decided to start afresh with your update 7. However I have hit a problem in that I want to add block navigation menu 3 to the demos Pet template so I have pasted across the following code from block navigation meag menu to the demp pet template but as can be seen from the attached image file the drop down menu is off centre. I would appreciate the correct code to put this right, please.
Regards
Len Smith

<!-- Header
============================================= -->
<header id="header" class="transparent-header dark" data-sticky-class="not-dark">
<div id="header-wrap">
<div class="container">
<div class="header-row">
<div class="primary-menu-trigger">
<svg class="svg-trigger" viewBox="0 0 100 100">
<path
d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20">
</path>
<path d="m 30,50 h 40"></path>
<path
d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20">
</path>
</svg>
</div>

					<!-- Logo
					============================================= -->
					<div id="logo">
						[

						](demo-pet.html)
					</div><!-- #logo end -->

					<div class="primary-menu-trigger">
						<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
							<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
						</button>
					</div>

					<!-- Primary Navigation
							============================================= -->
					<nav class="primary-menu with-arrows block-mega-menu-3">

						<ul class="menu-container">
							<li class="menu-item">
								[
									Menu
								](demo-seo.html)
							
							<li class="menu-item mega-menu mega-menu-small">
								[Dropdown](#)
								<div class="mega-menu-content mega-menu-style-2 rounded-3">
									<ul class="sub-menu-container mega-menu-column px-2 py-3">
										<li class="menu-item">
											[
												Documentation

A quick book to help you Setup.

											](#)
										
										<li class="menu-item">
											[
												Help & Support

Ask to our Experts.

											](#)
										
										<li class="menu-item">
											[
												Utilities

Useful utilities of our Template.

											](#)
										
										<li class="menu-item">
											[
												Components

See inside our Template.

											](#)
										
										<li class="menu-item">
											[
												Changelog

Version Updates and Changelogs.

											](#)
										
									
								</div>
							
							<li class="menu-item">[
								Menu
							](demo-seo-faqs.html)
						

					</nav><!-- #primary-menu end -->

					<form class="top-search-form" action="search.html" method="get">
						<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter.."
							autocomplete="off">
					</form>

				</div>
			</div>
		</div>
		<div class="header-wrap-clone"></div>
</header><!-- #header end -->

Fantastic. Thank you very much indeed.
As they say always ask the expert.
Kind Regards
Len Smith