I am experiencing a problem with site width changes in the navigation. I have checked margins and padding, but couldn't find a solution to fix the issue. It seems like the row element is causing the problem, but I'm not sure why.
Please assist me in resolving this problem.
Here is the HTML code:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">IT SPECIALIST</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" id="active" href="#">GŁÓWNA</a>
</li>
// Remaining HTML code omitted for brevity
</ul>
</div>
</nav>
</div>
<div class="col-md-2"></div>
</div>
I have removed the CSS code, but here it is in case you need it:
CSS code:
body {
margin: none;
padding: none;
}
.navbar .navbar-brand {
margin-left: 1vw;
}
// More CSS styles declared here
In my first edit, I mentioned that the row element is the cause of the issue. When using the navigation without any rows or columns, it takes up the entire site width. Are there other ways to center the site content?