HTML导航栏无法占满屏幕宽度问题求助

问题原因 #

1. Bootstrap容器限制：当前使用的container类默认带有左右padding，导致内部row元素的背景色无法突破容器范围，出现两侧白边。
2. 浏览器默认样式：浏览器自带的body元素默认有8px左右的margin，导致最外层导航栏无法贴紧屏幕边缘。
3. 背景色位置错误：背景色设置在row上，但row被包裹在带padding的container内，自然无法撑满屏幕宽度。

解决方案（内联CSS适配） #

步骤1：清除body默认边距 #

在页面<head>标签内添加内联样式，消除浏览器默认的body边距：

<style>
body { margin: 0; padding: 0; }
</style>

步骤2：调整导航栏结构与样式 #

将背景色移到最外层的header-bottom，并把container替换为container-fluid（Bootstrap全屏容器，无左右padding），同时修正row的默认margin：

<div class="header-bottom" style="width:100%; background-color:#ffe2f8;">
    <div class="header-sticky" style="height:70px;">
        <div class="container-fluid">
            <div class="row align-items-center" style="margin: 0;">

                <!-- 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">
                        <ul>
                            <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><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>

关键说明 #

• container-fluid：替代container后，容器会占满屏幕宽度，无左右padding，让内部内容可以全屏布局。
• 背景色移到header-bottom：确保整个导航栏区域都能覆盖背景色，而不是仅内部row部分。
• 清除body边距：消除浏览器默认的margin，让导航栏完全贴紧屏幕边缘。

内容的提问来源于stack exchange，提问作者meedhansh gupta