I'm currently working on creating a dashboard using Bootstrap that includes a side navigation bar. However, when the navbar is open, the content in the container gets pushed to the right and off the screen. I want the entire container to be resized to fit the screen regardless of whether the navbar is open or collapsed. Is there a specific Bootstrap CSS class that can be added to the body or container to address this issue?
<body>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#"><img src="assets/img/logo.png"></img></a>
</li>
<li>
<a href="overview.html"><span class="icon icon-home"></span>Overview</a>
</li>
<li>
<a href="#"> <span class="icon icon-suitcase"></span>Account Management</a>
</li>
<li>
<a href="#"><span class="icon icon-bar-graph"></span>Demand Planning</a>
</li>
<li>
<a href="#"><span class="icon icon-box"></span>Inventory Planning</a>
</li>
<li>
<a href="#"><span class="icon icon-light-bulb"></span>Vendor Management Invetory</a>
</li>
<li>
<a href="dashboards.html"><span class="icon icon-calculator"></span>Dashboards</a>
</li>
<li>
<a href="#"><span class="icon icon-text-document">Reports</a>
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="dashhead">
<div class="dashhead-titles">
<div class="dashhead-toolbar">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
</div>
</form>
</div>
<h3 class="dashhead-title">Overview</h3>
</div>
</div>
<ul class="nav nav-bordered mt-4 mt-md-2 mb-0 clearfix" role="tablist">
<li class="nav-item" role="presentation">
<a href="#traffic" class="nav-link active" role="tab" data-toggle="tab" aria-controls="traffic">Summary</a>
</li>
</ul>
<hr class="mt-0 mb-5">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="traffic">
<div class="row text-center m-t-md">
<div class="col-lg-4"</div>
</div>
</div>
</div>
<style>
#sidebar-wrapper {
z-index: 1000;
left: 235px;
width: 0;
height: 100%;
margin-left: -235px;
overflow-y: auto;
overlay-x: hidden;
background: #252D3A;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
#wrapper.toggled #sidebar-wrapper {
width: 235px;}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -235px;}
#page-content-wrapper {
width: 100%;
padding-top: 20px;}
#sidebar-nav {
position: absolute;
top: 0;
width: 235px;
margin: 0;
padding: 0;
list-style: none;}
</style>