Wordpress「Lightning」メニューを中央にする方法

Question

前提・実現したいこと

WordpressでWebを制作しています。
テーマ「Lightning」のナビゲーションメニューをスライドショーの下中央にしたいです。

試したこと

この方の質問(https://teratail.com/questions/95440)を参考にさせていただき
header.phpの該当する箇所を切り取り、メニューを下に持っていくことには成功しました。

また、こちらのサイト(https://www.vektor-inc.co.jp/post/lightning-header-csscustomize/)のcssをコピーして、追加cssにペーストしました。(ExUnitのcssにもやってみました)
が、左寄せのまま中央になりません...。

なぜ中央にならないのかわかりません。ここからどうしたら中央に表示できるのでしょうか。
教えてください。

@media (min-width: 992px){
.navbar-header {
    float: none;
}

.navbar-brand {
    text-align: center;
    float: none;
}

.navbar-brand img {
    display: inline;
    text-align: center;
}

ul.gMenu {
    float: none;
    position: relative;
    left: 50%;
    display: inline-block;
    text-align: center;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

}

			<?php
			$args  = array(
				'theme_location' => 'Header',
				'container'      => 'nav',
				'items_wrap'     => '<ul id="%1$s" class="%2$s ' . lightning_get_the_class_name( 'nav_menu_header' ) . '">%3$s</ul>',
				'fallback_cb'    => '',
				'echo'           => false,
				'walker'         => new description_walker(),
			);
			$gMenu = wp_nav_menu( $args );
			?>
		</div>

		<?php
		if ( $gMenu ) {
			echo '<div id="gMenu_outer" class="gMenu_outer">';
			echo $gMenu;
			echo '</div>';
		}
		?>

Answer 1

他サイトにのっていたcssをコピーするとできました。

@media (min-width: 992px) {

.container.siteHeadContainer {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.navbar-header {
	width: 100%;
	order: 0;
	float: none;
}

.siteHeader_logo {
	float: none;
	width: 100%;

}

.siteHeader_logo img {
	margin: 0 auto;
}

.gMenu_outer {
	width: 100%;
	order: 1;
	float: none;
}

ul.gMenu {
	float: none;
	display: flex;
	justify-content: center;
}

}