Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar.
HTML
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!--Navigation bar-->
<nav class="navbar navbar-expand-md bg-dark navbar-dark transparent" id="navbar">
<a class="navbar-brand" href="index.html">
<img src="images/DallE_Extendo-removebg.png" width="80" height="60" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact us</a>
</li>
</ul>
</div>
</nav>
<!--NavBar Ends-->
<img src="images/ShopInsideBooking (4).png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</body>
CSS
#navbar{
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
Looking forward to any assistance provided :)