Display Menu & logo in center of the page

Question

I have a logo & menu, displaying in the center of the page in the entire site as here .

but in only one page, it's displaying a bit to the left. I want to display that menu at the center center of the page as shown here .

CSS:

.ms-topmenu .ms-label {
    font-size: 15px;
    text-transform: none;
    color: #000000;
    padding: 14.75px 15px;
}

.ms-megamenu .anchor_mbmenu {
    background: rgb(7, 70, 102);
    padding: 8px 0;
    display: none;
}

.ms-megamenu .text-right {
    text-align: right;
}

Answer 1

Go in your styles.css and change

@media only screen and (min-width: 1224px)
.cms-customized-mobile-cases #header {
    margin: 0 auto;
    width: 1200px;
}

to

@media only screen and (min-width: 1224px)
.cms-customized-mobile-cases #header {
    margin: 0 auto;
    width: 1000px;
}

and you are done.

Answer 2

The page is having a extra class ' cms-customized-mobile-cases ' in the body tag which is causing a width of header to override to 1200px , which is causing the menu to shift a little left remove this class from body tag and you will get the desired menu.

Here is the class which is causing the problem:

.cms-customized-mobile-cases #header {
    margin: 0 auto;
    width: 1200px;
}

Answer 3

try to apply this below css will may solve issue.

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}