Set width of div to full page

by DeveloperSandip

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="header container-fluid d-flex justify-content-between align-items-center">
    <div class="logo">Logo</div>
    <nav class="nav">
      <ul class="d-flex">
        <li>
          <a href="" title="">Link 1</a>
        </li>
        <li>
          <a href="" title="">Link 2</a>
        </li>
        <li>
          <a href="" title="">Link 3</a>
        </li>
        <li>
          <a href="" title="">Link 4</a>
        </li>
      </ul>
    </nav>
    <div class="hamburger-menu-wrap ">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <header class="banner container-fluid border-bottom">
    <div class="banner1">
      <p>Header 1</p>
      <p>Header 2</p>
      <p>Header 3</p>
      <p>Header 4</p>
    </div>
  </header>

  <div class="main-container container-fluid">
    <p>Content 1</p>
    <p>Content 2</p>
    <p>Content 3</p>
    <p>Content 4</p>
    <p>Content 5</p>

  </div>

  <footer class="footer container-fluid text-center">
    <p class=" pb-0">Footer</p>
  </footer>

CSS

/* header */
.header{ background-color: #2b2d3b; color: #fff; padding-top: 10px; padding-bottom: 10px; }
.header nav ul{ list-style-type: none; padding: 0; margin: 0; background-color: #2b2d3b; color: #fff; }
.header nav ul li{ list-style: none; padding:0 ; margin: 0 15px; color: #fff; }
.header nav ul li a{ color: #fff; }

/* hamburger menu */
.hamburger-menu-wrap {width: 24px;height: 16px;cursor: pointer;z-index: 1;display: none;}
.hamburger-menu-wrap span {background: #fff;display: block;height: 2px;margin-bottom: 6px;width: 100%;float: right;cursor: pointer !important;}

@media(max-width:991px){
    .hamburger-menu-wrap{ display: block; }
    .header nav{ display: none; }
    .hamburger-open .header nav{ display: flex; }
    .hamburger-open .header nav ul{ flex-direction: column!important; }
}

.footer{ background-color: #2b2d3b; color: #fff; padding-top: 10px; padding-bottom: 10px; }

JavaScript

$(document).ready(function() {
// Hamburger Menu
$('.hamburger-menu-wrap').click(function () {
    $('body').toggleClass('hamburger-open'); 	
});
});