Html 如何在设备上固定容器中的导航栏宽度？

很久以前，我用bootstrap做了一个项目，我将导航栏放在一个容器中，使其与内容具有相同的宽度。我没有做任何媒体查询，设备上的导航栏是全宽的，我喜欢。现在我用同样的方法做了一个新项目。桌面上的导航栏具有容器宽度，但在设备上，它不像其他项目那样具有100%的宽度

我已尝试在媒体查询中为.container指定100%的宽度，使用！重要的那没用

<style>
.header-block {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    min-height: 200px;
    display: block;
}
</style>
<div class="container">
            {% block header %}
                <div class="header header-block" style="background-image: url({{header_image}});">

                </div>
                <nav class="test-nav">
                    {% include "base/menu.twig" with {'menu': menu.get_items} %}
                </nav>
            {% endblock %}
        </div>

我想把导航栏放在一个容器中，因为我不喜欢这个项目中的全宽导航。在其他设备（如桌子/电话）上，我希望它是全宽的。

.标题栏{ 背景图像：urlhttps://www.w3schools.com/w3css/img_lights.jpg; 背景重复：无重复； 背景尺寸：封面； 宽度：100%； 最小高度：200px； 显示：块； } 保险商实验室{ 列表样式：无； 颜色：白色； 显示器：flex； 对正内容：空间均匀； } 你好 你好 你好

---

没有工作，设备上的导航在左边仍然有一个空白点我想我知道问题是什么，如果我把导航条从容器中取出，给它一个特定的宽度和边距：0 auto它可能会工作，但我使用引导，每次屏幕变小，容器宽度也变小，有没有办法通过调整大小使导航与集装箱保持相同的宽度？请立即检查我的解决方案