部分未扩展到100％宽度

Question

我正在使用vue并尝试使我的元素具有响应性，因此从移动优先方法开始。我正在使用normalize.css，但我认为这与问题无关。 div的宽度不是100％，它会切入一半。我正在使用开发工具移动工具来模拟要查看的屏幕。 我已经附加了和jsfiddle作为代码。

  <div>
    <header class="container">
        <section>
            <img src="https://placeimg.com/400/100/arc" alt="logo">
        </section>
        <section>
           Logo text
        </section>
        <section>
            <h3>Call Us</h3>
            <div class="contact__info">
                <sub>Mon - Fri</sub>
                <a href="tel:12345" class="contact__info--number">12345</a>
            </div>
        </section>
    </header>
  </div>

Answer 1

标头上固定的width: 1326px;使该元素延伸得比视口更宽（如果后者小于视口），因此它会溢出其父对象，但不会拉伸父对象本身。而且由于该父级不会拉伸，因此其内部的div的100％仍仅是视口宽度的100％。

如果要使用此“移动优先”功能，首先要使用的固定宽度> 1300px的标头是什么？删除它或使其动态化，否则，将其作为其余所有测试用例的意义不大。