Resize Nav Breakpoint

Hi All

I have a menu that wraps to the next line on horizontal resize of 992px so I decided to collapse to mobile navigation. My media query works but the mobile menu extended beyond the container. Menu items actually appear below the black background of the mobile nav when you scroll down. It works fine at 768px what did i do wrong

my media query

@media (max-width: 992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}

Thanks for any help you can offer…
I am very new to wordpress

Hello there,

I hope you are doing well today.

Could you please provide an image of the issue?

Best Regards,
Support