Bootstrap Navigation destroying site width-CodePudding

Nav is changing site width. I don't know why's that. I thought that's because margins or padding, but couldn't find any way to fix the problem. I came to conclusion that is cousing problems, but I don't know why's that. Please help!

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>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                O NAS
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Zespół</a>
                            <a class="dropdown-item" href="#">Partnerzy</a>
                            <a class="dropdown-item" href="#">Facebook Fanpage</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                OFERTA
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Odzyskiwanie Danych</a>
                            <a class="dropdown-item" href="#">Wsparcie dla twojej firmy</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="nav-link" href="#">USŁUGI DLA FIRM I OSÓB PRYWATNYCH</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="nav-link" href="#">DLACZEGO MY</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="nav-link" href="#">ZGŁOŚ AWARIĘ</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="col-md-2"></div>
    </div>

I deleted whole css code, and nothing changed, but in case you need it here it is:

CSS code:

body {
  margin: none;
  padding: none;
}

.navbar .navbar-brand {
  margin-left: 1vw;
}

.navbar button {
  margin-right: 1vw;
}

.navbar .dropdown-item:hover, .navbar #nav-link:hover, .navbar #active {
  background-color: #5394dd;
  color: white;
}

.navbar .nav-item {
  margin-left: 0.5vw;
}

.navbar .nav-item:last-child {
  margin-right: 1vw;
}

Edit 1: row is cousing the problem, while using nav, without any rows, and columns, navigation is taking whole site width, nothing more. So, is there any other way, to center site, like this?

CodePudding user response：

Remove all col's from around the Navbar and add a container instead.

<div class="container">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <!--Your nav content here-->
   </nav>
</div>

CodePudding user response：

I'm not sure exactly how it is destroying the site's width but try this adding this to your styling:

*{
margin: 0;
padding: 0;
}