How to style Hook Button

Hello! I'm trying to style my mobile header button entered via a hook.

Hook:

[[[

]]]

CSS

#mbutton {
width:50px !important;
background-color: #f37f3d !important;
border: 2px solid #000000 !important;
color: #f37f3d !important;
line-height: 20px !important;
}

I'm trying ID instead of class because class didn't work either.

Any help is much appreciated!

Note I might have a problem with my simple CSS plugin... entering all my code below for you to review:

#mbutton {
width:50px !important;
background-color: #f37f3d !important;
border: 2px solid #000000 !important;
color: #f37f3d !important;
line-height: 20px !important;
}

@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}

@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #f37f3d;
border: 1px solid #000000;
color: #000000;
line-height: 30px;

@media (min-width:769px) {
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #f37f3d;
border: 2px solid #000000;
color: #000000;
line-height: 35px;
}

.menu-item-has-children .dropdown-menu-toggle:before {
content: '+';
font-family: inherit;
}

}

html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}

html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}

@media only screen and (max-width: 768px) { html, body { width: 100%; overflow: hidden; }