I attempted the solution provided by @ravi.ram, but unfortunately, it did not work for me. Here is a snippet of how my code begins. Please note that the navigation bar is positioned outside the container. The fix has been included below the code snippet.
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/logo.jpg">
</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 ml-auto mr-auto">
Here are a few alternative solutions:
To maintain the container style while achieving full width, you can add inline styling like this:
<div class="container" style="max-width:100%;">
. This adjustment is necessary because the default max-width of the container class is set to 1140px.
Instead of using container, try utilizing container-fluid for a full width layout.
If neither option suits your needs, consider eliminating the container altogether by removing the div element.
For further reference, check out this example on CodePen