Bootsrap 5.3 navbar doesnt stretch to the width of the page

Question

I am trying to make the list items in bootstrap navbar stretch all the width of the page in the mobile view but it doesn't work.

I tried some of the tutorials here but none worked. I even tried *{margin:0;padding:0;} in CSS but it doesn't work. I want the navbar list elements width to stretch to the width of the page in mobile view.

This is how it looks in browser:

#header-nav {
  background-color: rgb(162, 162, 162);
  border-radius: 0;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
}

.navbar-brand a {
  text-decoration: none;
}

.navbar-brand h1 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  color: black;
  text-shadow: 1px 1px 1px white;
}

.navbar-brand a:hover,
a:focus {
  text-decoration: none;
}

.nav-item a {
  color: black;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  background-color: white;
}

.nav-item a:hover,
a:focus,
a:active {
  color: black;
  background-color: rgb(188, 188, 188);
}

.navbar-nav {
  border-top: 3px solid black;
}

#chickenNav,
#beefNav {
  border-bottom: 2px solid black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
  <nav id="header-nav" class="navbar">
    <div class="container">
      <div class="navbar-header">
        <div class="navbar-brand">
          <a href="index.html">
            <h1>Food, LLC</h1>
          </a>
        </div>
      </div>
      
      <button class="navbar-toggler d-block d-sm-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">=</button>
      
      <div class="collapse navbar-collapse" id="collapse">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a id="chickenNav" class="nav-link" href="#">Chicken</a>
          </li>
          <li class="nav-item">
            <a id="beefNav" class="nav-link" href="#">Beef</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Sushi</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Answer 1

You can just use Bootstrap's spacing classes to adjust as needed. I'm removing the horizontal padding from the container with px-0 and adding it back onto the nav header with px-2.

#header-nav {
  background-color: rgb(162, 162, 162);
  border-radius: 0;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
}

.navbar-brand a {
  text-decoration: none;
}

.navbar-brand h1 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  color: black;
  text-shadow: 1px 1px 1px white;
}

.navbar-brand a:hover,
a:focus {
  text-decoration: none;
}

.nav-item a {
  color: black;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  background-color: white;
}

.nav-item a:hover,
a:focus,
a:active {
  color: black;
  background-color: rgb(188, 188, 188);
}

.navbar-nav {
  border-top: 3px solid black;
}

#chickenNav,
#beefNav {
  border-bottom: 2px solid black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
  <nav id="header-nav" class="navbar">
    <div class="container px-0">
      <div class="navbar-header px-2">
        <div class="navbar-brand">
          <a href="index.html">
            <h1>Food, LLC</h1>
          </a>
        </div>
      </div>
      
      <button class="navbar-toggler d-block d-sm-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">=</button>
      
      <div class="collapse navbar-collapse" id="collapse">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a id="chickenNav" class="nav-link" href="#">Chicken</a>
          </li>
          <li class="nav-item">
            <a id="beefNav" class="nav-link" href="#">Beef</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Sushi</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>