如何修复设备上容器中的导航栏宽度？

Question

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

我尝试在使用 !important 的媒体查询中为 .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>

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

Answer 1

.header-block {
  background-image: url(https://www.w3schools.com/w3css/img_lights.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 200px;
  display: block;
}

ul {
  list-style: none;
  color: white;
  display: flex;
  justify-content: space-evenly;
}

<div class="container">
  <div class="header header-block">
    <nav class="test-nav">
      <ul>
        <li>hi</li>
        <li>hi</li>
        <li>hi</li>
      </ul>
    </nav>
  </div>
</div>