Сечение не расширяется до 100% ширины

Question

Я работаю с vue и пытаюсь сделать свой элемент отзывчивым, поэтому начнем с подхода Mobile first. Я использую normalize.css, но я не думаю, что это как-то связано с проблемой. Div не 100% ширины, он разрезает на полпути. Я использую мобильный инструмент Dev Tool для эмуляции экрана для просмотра. Я приложил и 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; в заголовке делает этот элемент растягивающимся шире, чем область просмотра (если последний меньше этого), поэтому он переполняется из своего родителя, но не растягивает самого родителя.И поскольку этот родительский элемент не растягивается, 100% с div внутри него по-прежнему составляют только 100% ширины области просмотра.

Что делает в этом заголовок с фиксированной шириной> 1300px вПервое место, если вы хотите подойти к этому «мобильному первому»…?Удалите его или сделайте его динамичным, иначе это не имеет смысла в качестве контрольного примера для остальной части того, что вы делаете для начала.