Recently, I embarked on my journey with Bootstrap and encountered an issue with the Grid Col System. I am aiming to center the logo and navigation bar on the page by dividing the Grid layout into 4 col-lg-4 (md-4). Subsequently, I inserted the image and navigation bar into the second DIV col-lg-4 (refer to the code provided), however, upon previewing, I noticed a slight deviation of the logo and navigation to the left.
If anyone could assist me in resolving this matter, I would greatly appreciate it. Thank you in advance.
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4"></div>
<div class="col-lg-4 col-md-4 col-sm-4">
<img id="logo" src="PlayStation_1_Logo.png">
</div>
<div class="col-lg-4 col-md-4"></div>
</div>
</div>
<!--main navbar-->
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2"></div>
<div class="collapse navbar-collapse navbar-menubuilder col-lg-8 col-md-8">
<ul class="nav navbar-nav">
<li>
<a href="index">Index</a>
</li>
<li>
<a href="service">Service</a>
</li>
<li>
<a href="/about-us">About-us</a>
</li>
<li>
<a href="/news">News</a>
</li>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</div>
<div class="col-lg-2 col-md-2"></div>
</div>
</div>
</div>