I have been trying for hours to get my navbar to fill the width of the screen but I have had no luck. I have tried setting padding to 0, !important, width 100% but nothing is working. Any help would be appreciated.

```css
.carousel-item {
  height: 100vh;
  min-height: 300px;
}

.navbar-nav a {
  font-size: 18px;
}

.navbar-nav {
  text-align: center;
  background-color: #bfd9d7;
  width: 100%;
  padding: 0%;
}

.w-100 {
  height: 100vh;
}
```

```html
<!doctype html>
<html lang="en">

<head>
  <title>Scot Living</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light fixed-top">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Furniture</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Dining</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Bedroom</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="carousel slide" data-ride="carousel" id="carouselExampleIndicators">
    <ol class="carousel-indicators">
      <li class="active" data-slide-to="0" data-target="#carouselExampleIndicators"></li>
      <li data-slide-to="1" data-target="#carouselExampleIndicators"></li>
      <li data-slide-to="2" data-target="#carouselExampleIndicators"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img alt="First slide" class="d-block w-100" src="Pictures/bedroom.jpg">
        <div class="carousel-caption d-none d-md-block">
          <h5 class="animated bounceInRight" style="animation-delay: 1s">Bedroom</h5>
          <p class="animated bounceInLeft" style="animation-delay: 2s">Bedroom Furniture</p>
          <p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Shop Bedroom</a></p>
        </div>
      </div>
      <div class="carousel-item">
        <img alt="Second slide" class="d-block w-100" src="Pictures/diningroom.jpg">
        <div class="carousel-caption d-none d-md-block">
          <h5 class="animated slideInDown" style="animation-delay: 1s">Dining Room</h5>
          <p class="animated fadeInUp" style="animation-delay: 2s">Dining room furniture</p>
          <p class="animated zoomIn" style="animation-delay: 3s"><a href="#">Shop Dining</a></p>
        </div>
      </div>
      <div class="carousel-item">
        <img alt="Third slide" class="d-block w-100" src="Pictures/carpet.jpg">
        <div class="carousel-caption d-none d-md-block">
          <h5 class="animated zoomIn" style="animation-delay: 1s">Flooring</h5>
          <p class="animated fadeInLeft" style="animation-delay: 2s">Wide range of flooring</p>
          <p class="animated zoomIn" style="animation-delay: 3s"><a href="#">Shop Flooring</a></p>
        </div>
      </div>
    </div><a class="carousel-control-prev" data-slide="prev" href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" data-slide="next"
      href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
  </div>

  <!-- Optional JavaScript -->
  <script type="text/javascript" src='script.js'>
  </script>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>
```

I'm trying to get the blue navbar to fill out to the edge of the screen on both sides:

[![](https://i.stack.imgur.com/OBG3H.jpg)](https://i.stack.imgur.com/OBG3H.jpg)