I am currently working on a website project where I want to have a navigation bar that spans the full width of the screen with a black background. I also need the links to be centered and evenly distributed within the navbar.
My main issue right now is removing the white space on the sides of the navbar to achieve a seamless full black background effect. I've been experimenting with different solutions but haven't found the perfect fix yet.
CSS
.masthead {
height: 25vh;
min-height: 500px;
background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* NAVBAR */
/* Evenly Distribute Navbar Components */
.navbar-nav > li{
padding-left:30px;
padding-right:30px;
}
.navbar {
background-color: #000000;
}
HTML
<body">
<section class="header">
<div class="container">
<!-- Navigation Bar -->
<div class="row">
<div class="navbar2 col-md-12" data-interval="false">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">MAD</a>
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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="#">Book a Service</a>
</li>
<li class=[](https://i.stack.imgur.com/MKM0z.png)"nav-item">
<a class="nav-link" href="#"
>Shop</a
>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</section>