Main Navigation Background to full width / center the menu

[glutzkommunikation]

Hello Support-Team

I hope you have a good time and you are all doing well.
I have two questions for you and I’m curious, if you can help me.

A. I have create some custom CSS to center the main-nav.
With Safari (Version 9.1.2) it works, but if I load the page with Firefox (47.1)
or Google Chrome (52.0.2743.116) the main-nav moves to the left.
I’ve searched the support-forum for an answer, but I didn’t find any solution.
I think I should change the code in the header.php but where and what, I have no idea.

B. Is it possible to change the background of the main-nav to full screen width?
Attached I send you a screenshot, what I exactly mean.The pink area on the left and the right side should be the same colour as the black background from the main nav.

Following the CSS-Code:
#header-section {
padding: 0 0 !important;
border: none;
}

#header-section {
background: rgba(255,255,255,0.0);
}

#header-section #logo img, #header-section #logo img.retina {
margin: 0 auto;
width: 708px; /*adjust as necessary*/;
}

/* Full width logo code */
#header-section #logo {
width: 100%;
}

/* Full width menu code */
#nav-section{
width: 100%!important;
}

#nav-section {
background: rgba(64, 64, 64, 1.0);
max-width: 100%!important;
margin: 0 auto;
}

.nav-wrap {
float:center!important;
align: center!important;
}

#main-navigation{
float: center!important;
width: 100%;
max-width: 100%!important;
text-align: center!important;
}

nav .menu li{
float: center!important;
}

.nav-wrap{
float: center!important;
}

main-navigation {
text-aligtn: center;
}

Thank you very much for your answer.

Kind regards
Achim

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

nav .menu {
    text-align: center !important;
    display: inline-block !important;
}

Thanks
Mohammad

[glutzkommunikation]

Hello Mohamad!

Thank you very much for your answer. Now, the menu is centered in all named browsers. YEAH!!!
The last challenge for now is stretching the navigations background to full screen width.
Any idea to solve this problem?

Kind regards
Achim

[David Martin – Support]

Please test this:

#header-section .container {
    width: 100%!important;
}

[glutzkommunikation]

Hello David
You make my day!!! It works perfect!
Thank you very much.

Many greetings to you and your colleagues
and have a good time.

Achim

[David Martin – Support]

Anytime! – David.