截面未扩展到100%宽度

我正在与vue合作,并试图使我的元素具有响应性,因此从移动优先的方法开始。我正在使用normalize.css,但我认为这与问题无关。div不是100%宽度,它切到一半。我正在使用dev工具mobile工具来模拟要查看的屏幕。 我已附上 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>