画面全幅ヘッダー画像を設定

ヘッダー画像を(style.css)のbodyに記述し、以下の指定で一応全画面表示が可能になりましたが、

background-position: 0 0;
background-size: 100% auto;
background-repeat: no-repeat;

やはり、グローバルナビ以下のコンテンツが、ブラウザ幅の増減の影響を受けて上下してしまい、うまく行きません。

bodyにflexを入れているのが原因かと。

body {
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-image: url("http://utairui.com/wp/wp-content/uploads/Boovo-hed-img-big.png");
    background-position: 0 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

すべて無しにして、

#header {
    width: 100%;
    background-image: url("http://utairui.com/wp/wp-content/uploads/Boovo-hed-img-big.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 0;
    padding: 0 0 46.728971963%;
    overflow: hidden;
    margin-bottom: 20px;
}

とすれば画面幅100%でいけます。flexは幅指定がないとその子要素の中身のサイズで最大のものに合うため一応目的の1070pxにはなっているわけですが、画面幅いっぱいにするためには解除する必要があります。
またflex-flow: column wrapや縦並びの設定は何かとおかしくなるため、flex-flow: raw wrap;で横並びにして最大幅が設定したい場合は、max-widthなどをその要素に設定するなどする必要があるかと思います。

上記の場合、高さは0にしてあるのでpaddingで高さを出します。上記のpaddingの値はボトムに現在の1070x500pxのアスペクト比を入れてあります。x:100%の時のyの値が46.728971963%ということです。これを小さくすれば高さも低くなります。

background-sizeをcoverにして、background-positionでセンタリングしてあるので、高さを変えればそれに追従しますが、比率で設定してあるため、大きな画面では広くなりすぎます。そのため、メディアクエリで、

@media screen and (min-width: 80em) {
  #header {
    padding: 0 0 20%;
  }
}

というのを書いておくと、80em(≒1280px)以上の時は20%で固定できます。小さい画面の場合は良いかと思うんですけどね。ここらはメディアクエリで調整して下さい。考えるポイントとしては、どの画面幅の時に目的のサイズにするかです。

またヘッダのclearfixは、Simplicityのデフォルトかと思いますが、

要素::after {
  content: "";
  display: table;
  clear: both;
}

と、中身にfloatが使われている親要素に入れればfixできます。
ただし、これら高さを正しくもたせるとスクロール追従の動作で、フッターにスクロール要素がめり込むなどの問題が出る場合があるので、気をつけて下さい。

今の設定のまま行くのであれば、

#header {
    background-image: url("http://utairui.com/wp/wp-content/uploads/Boovo-hed-img-big.png");
    width: calc(100vw - 16px);
    margin-bottom: 20px;
}

というようなことをしてもできるにはできます。100vwはスクロールの幅も含めると思うので、その分を引く必要があります。スクロールの幅がブラウザによってまちまちで16pxでは対応できないような場合は、

要素 {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translatex(-50%);
}

このようにすれば画像をセンタリングはできるかと思います。

遅くなりましたが、大変丁寧なご説明ありがとうございます。
とても勉強になりました。

現在は１番目のご指摘の「paddingｰbottom」を利用したもので、ブラウザ幅一杯のヘッダー画像を実現できました。
flexはよく使いますが、理由はわかりませんがおっしゃるように「column」で期待通りの結果が得られないことがあります。

最後のご指摘のものは、「transform」を使ったことがなくよく解りませんでした。

ありがとうございました。

最後のはbodyにflexが質問時のように設定あるとして、#headerに利用します。
要素の幅を100vwつまりは画面幅にして、leftで画面センターに持ってきますがそれだと画像左端がセンターに合うので、translatexで画面幅の半分だけマイナスすることでセンター寄せにします。

100vwだと若干小さいかも知れませんが、足りないような場合は101vwとか微調整が必要です。