The problem here is that my navbar div is not covering the full 100% width of the screen, since I changed the background color, I noticed this problem and width: 100%; didn't help as well. I don't know what's the problem, please help me out.... I will share only my HTML code since the CSS is not working in my code so only the inline css I have put in PHP scriptlet and it the normal HTML part is working.... So please tell what's the problem. Little white area is displayed on both the sides of my navbar... Image is attached as well...
<div class="header-bottom">
<div class="header-sticky" style="width:100%; height:70px;">
<div class="container">
<div class="row align-items-center" style="background-color:#ffe2f8;">
<!-- Header Logo Start -->
<div class="col-xl-1 col-6" style="margin-top:-25px;">
<div class="header-logo">
<a href="index.php"><img src="assets/images/logo/logo.png" alt="Site Logo" /></a>
</div>
</div>
<!-- Header Logo End -->
<!-- Header Menu Start -->
<div class="col-xl-11 d-none d-xl-block" style="margin-top:-21px; font-family: 'Roboto Condensed', sans-serif;">
<div class="main-menu position-relative">[](https://i.sstatic.net/3kGQd.jpg)
<ul>
<!-- <li class="has-children"> <li>
<a href="#"><span>Home</span> <i class="fa fa-angle-down"></i> </a>
<ul class="sub-menu">
<li><a href="index.php">Home 1</a></li>
<li><a href="index-2.php">Home 2</a></li>
</ul>
</li> -->
<li><a href="index.php" style="font-size:13px;margin-right:-20px;"> <span>Home</span></a></li>
<?php
$query = "select * from categories where status='0'";
$data = mysqli_query($link, $query);
while($row = mysqli_fetch_array($data))
{
extract($row);
echo "<li class='has-children position-static' style='padding-left:-150px;margin-right:-25px;'>";
echo "<a href='sproducts.php?categoryid=$categoryid' style='font-size:13px;'> <span>".ucfirst($category)."</span><i class='fa fa-angle-down'></i></a>";
echo "<ul class='sub-menu'>";
$query1 = "select * from subcategories s, categories c where c.categoryid = s.categoryid and s.status='0' and s.categoryid = '$categoryid'";
$data1 = mysqli_query($link, $query1);
while($row1 = mysqli_fetch_array($data1))
{
extract($row1);
echo"<li><a href='viewsproducts.php?subcatid=$subcatid'>".strtoupper($subcategory)."</a></li>";
}
echo"</ul>";
echo"</li>";
} ?>
<!-- <li class="has-children position-static">
<a href="#"><span>Shop</span> <i class="fa fa-angle-down"></i></a>
<ul class="mega-menu row-cols-4">
<li class="col">
<h4 class="mega-menu-title">Shop Layout</h4>
<ul class="mb-n2">
<li><a href="shop-grid.php">Shop Grid</a></li>
<li><a href="shop-left-sidebar.php">Left Sidebar</a></li>
<li><a href="shop-right-sidebar.php">Right Sidebar</a></li>
<li><a href="shop-list-fullwidth.php">List Fullwidth</a></li>
<li><a href="shop-list-left-sidebar.php">List Left Sidebar</a></li>
<li><a href="shop-list-right-sidebar.php">List Right Sidebar</a></li>
</ul>
</li>
<li class="col">
<h4 class="mega-menu-title">Product Layout</h4>
<ul class="mb-n2">
<li><a href="single-product.php">Single Product</a></li>
<li><a href="single-product-sale.php">Single Product Sale</a></li>
<li><a href="single-product-group.php">Single Product Group</a></li>
<li><a href="single-product-normal.php">Single Product Normal</a></li>
<li><a href="single-product-affiliate.php">Single Product Affiliate</a></li>
<li><a href="single-product-slider.php">Single Product Slider</a></li>
</ul>
</li>
<li class="col">
<h4 class="mega-menu-title">Product Layout</h4>
<ul class="mb-n2">
<li><a href="single-product-gallery-left.php">Gallery Left</a></li>
<li><a href="single-product-gallery-right.php">Gallery Right</a></li>
<li><a href="single-product-tab-style-left.php">Tab Style Left</a></li>
<li><a href="single-product-tab-style-right.php">Tab Style Right</a></li>
<li><a href="single-product-sticky-left.php">Sticky Left</a></li>
<li><a href="single-product-sticky-right.php">Sticky Right</a></li>
</ul>
</li>
<li class="col">
<h4 class="mega-menu-title">Other Pages</h4>
<ul class="mb-n2">
<li><a href="my-account.php">My Account</a></li>
<li><a href="login-register.php">Loging | Register</a></li>
<li><a href="wishlist.php">Wishlist</a></li>
<li><a href="cart.php">Cart</a></li>
<li><a href="checkout.php">Checkout</a></li>
<li><a href="compare.php">Compare</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-children">
<a href="#"><span>Pages</span> <i class="fa fa-angle-down"></i></a>
<ul class="sub-menu">
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="faq.php">Faq</a></li>
<li><a href="404-error.php">404 Error</a></li>
</ul>
</li>
<li class="has-children">
<a href="#"><span>Blog</span> <i class="fa fa-angle-down"></i></a>
<ul class="sub-menu">
<li><a href="blog.php">Blog</a></li>
<li><a href="blog-left-sidebar.php">Blog Left Sidebar</a></li>
<li><a href="blog-right-sidebar.php">Blog Right Sidebar</a></li>
<li><a href="blog-details.php">Blog Details</a></li>
<li><a href="blog-details-sidebar.php">Blog Details Sidebar</a></li>
</ul>
</li> -->
<li><a href="contact.php" style="font-size:13px;"> <span>Contact</span></a></li>
</ul>
</div>
</div>
<!-- Header Menu End -->
<!-- Header Action Start -->
<div class="col-xl-2 col-6">
</div>
<!-- Header Action End -->
</div>
</div>
</div>
</div>
You did not nulled default body margin like this:
body {
margin: 0;
}
Btw, you should get more familiar with the dev tools (F12).