Margem esquerda da margem: elementos com edição automática = até o preenchimento à esquerda do item de estouro de 100% de largura

Deixe-me demonstrar o problema com o seguinte HTML:

<section style="text-align: center;">
  <header style="margin: 0px auto; width: 300px; background: orange;">&nbsp;</header>
  <div>
    <article style="overflow-x: auto; width: 100%; background: pink;">
      <img src="http://placekitten.com/10000/10" />
    </article>
  </div>
</section>

O 'article'elemento lá; Eu gostaria doIMG elemento para que haja a mesma distância da esquerda da página que oheader elemento. Eu quero que isso seja verdade, independentemente de quão amplo o usuário redimensione seu navegador.

E eu quero fazer isso apenas com CSS.Você pode adicionar novos elementos, mas não dentro do 'article' etiqueta, rótulo, palavra-chave.

Eu imagino que isso seja impossível, se não difícil. Eu tive algumas idéias, mas você poderia ajudar?

questionAnswers(1)

yourAnswerToTheQuestion