Resizing Bootatrap4 Navigation bar not working acordingly - html

Question

.navbar.navbar-expand-lg.navbar-light.bg-light{
width:1920px;
background-color:#eee;
height:50px;
}
footer{
background-color:grey;
}
#media screen and (min-width:320px){
.navbar.navbar-expand-lg.navbar-light.bg-light{
width:100%;
}
}
#media screen and (min-width:985px){
#tog{
height:50px;
}
}
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="tog" role="navigation">
<div class="navbar-header">
<a id="x" class="navbar-brand" href="http://disputebills.com">
<img style="padding-bottom:75px; " id="image;" src="assets/logo.png" alt=" x">MANAGEMENT SYSTEM
</a>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" id="but"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<div class="col-2"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/table">Details
</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/assigned-employees">Employees</a>
</li>
<li class="nav-item active ">
<a class="nav-link" routerLink="/bug-reporting">Report</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="row">
<footer id="footer" role="contentinfo">
<div class="container-fluid">
<div class="row footer-list-row">
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6" id="com">
<h3>Company</h3>
<ul>
<li>
<a href=''>About</a>
</li>
<li>
<a href=''>News</a>
</li>
<li>
<a href=''>Careers</a>
</li>
</ul>
</div>
<div class="col-xs-6" id="sol">
<h3>Solutions</h3>
<ul>
<li>
<a href=''>Applications</a>
</li>
<li>
<a href=''>Planning</a>
</li>
<li>
<a href=''>Service</a>
</li>
<li>
<a href=''>Management</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6" id="part">
<h3>Part</h3>
<ul>
<li>
<a href=''>Partner</a>
</li>
<li>
<a href=''>Partner</a>
</li>
<li>
<a href=''>Login</a>
</li>
</ul>
</div>
<div class="col-xs-6" id="contact">
<h3>Contact Us</h3>
<ul>
<li>
<a href=''>Contact Us</a>
</li>
<li>
<a href=''>Addresses</a>
</li>
<li>
<a href=''>Feedback</a>
</li>
<li>
<a href=''>Login</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
I have implemented bootstrap 4 navigation bar inside my web application.Since it is little bit of tall than I expected I needed to customize its height in to 50px. Soon after I did the customization, mobile view stated to show a malicious behavior. when I try to expand the menu by clicking the "List Icon" it expands the list underneath of other DIV s like follow (Like when it has z index -1)
List View
This is the html code I used for navigation bar
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="tog" role="navigation" style="width:1920px; height:50px;">
<div class="navbar-header">
<a id="x" class="navbar-brand" href="http://disputebills.com">
<img style="padding-bottom:75px; " id="image;" src="assets/logo.png" alt="Dispute Bills">ATTENDENCE MANAGEMENT SYSTEM
</a>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" id="but"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<div class="col-2"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/table">My Details
</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/assigned-employees">Assigned Employees List</a>
</li>
<li class="nav-item active ">
<a class="nav-link" routerLink="/bug-reporting">Report Bugs</a>
</li>
</ul>
</div>
</nav>
I have tried by changing the z-index. But it didn't work for me. any clue on this please