特定の要素をブラウザ幅いっぱいにしたい

何か要素を挿入した方が良いですが、挿入しなくてもできます。

#body::before {
    content: "";
    height: 10px;
    background-color: #333;
    margin: 40px 0;
    display: block;
}

ナビがロゴの横に来てることから、何かしらカスタマイズされていると思うので、#bodyに::beforeでやりましたが、ヘッダの構造がわかればまた別の書き方もできるかと。

jQueryで空要素を挿入しても、結局#headerにも#bodyにも関係ないブロックなので、display:blockにすれば勝手に画面幅ですし、背景色入れて高さと上下マージンを入れるだけかと思います。

もし、ナビが#headerの中に入っているのであれば、

#header {
  border-bottom: 10px solid #333;
  padding-bottom: 40px;
}

でもできそうですけどね。まぁやり方はhtmlの構造次第でいくつかあると思いますが、どうなっているかわからないのでどれが良いかは何とも言えません。どれでも同じようなことはできそうです。

早速のご回答ありがとうございます。
どちらの方法でも出来ました！
難しく考えすぎていました…

実はもう一箇所同じようにしたいのですが、
下記の様に中間にあるコンテンツ(要素(文字と画像を配置))
のみ幅を親の幅を超えてブラウザの幅に背景色を効かせたい場合は
どのようにしたら良いでしょうか？
コンテンツそのものは、1070に収まっていて良いのですが、backgroundだけ幅を効かせたいのです。

| ヘッダー |
——————–
| スライダー |
| コンテンツ |

お手数おかけします。
よろしくお願い申し上げます。

　　| ヘッダー　 |　
－－－－－－－－－－－－
　　| スライダー |　
|　 　コンテンツ　　　 |

スペースが削除されてしまいました。

前レスにも書きましたが、htmlの構造がわからないと正しく答えられません。
その問題となるbackground部分がどうなっているかによります。

で、例えばの理屈としてblog-cardに背景があったらということでjQueryでdivを挿入してcssでスタイルしています。

サンプル: ブログカードをdivで囲ってdivだけを幅いっぱいにする | codepen

ポイント、

• widthは目的の幅にする
• positionはrelativeなどを入れておく
• left:50%でセンターに持っていく
• translatexで要素の幅の半分をマイナスにする

※ paddingを入れるならbox-sizing: border-boxは必須

これは、PCの時のみ有効です。なぜならwidthがpxで絶対値として設定されているため、#mainの幅が変更されたら、これは破綻します。
cssのみでもcalc()を使用して、計算したり、#mainの幅に連動すればできなくはないかと思いますが、まぁ設計をきちんとしていないと計算しにくかったり(※1)メディアクエリが大変だったりするので、幅はjQueryで計算したほうが簡単かと思います。
ついでにpaddingも計算してもよいかも知れません。

ブラウザのリサイズを考慮しなければ固定値とメディアクエリでもできそうですけどね。

※1 simplicityの要素の多くはbox-sizing: border-boxが入っていないので、そのままだとpaddingを入れた途端にはみ出します。また#main、#sidebar共にfloatが使われているため、その間のスペースは可変値であってcssのみで計算で求めるのは困難です。

サンプルでは一応#mainの幅をjQueryで算出しています。jQueryなしでもPCの時は動作するかと思います。

—-

ちょっと手間ですが別の方法として。

#mainにpaddingが入っているためいっぱいまで広がりません。#mainのpaddingを無くして、中の要素に幅をもたせ、marginでセンタリングすれば幅いっぱいは、これらをしなければ自動でなります。

サンプル: #mainの中身をmarginでレイアウト | codepen

いずれのサンプルもscssで書いてあります。css欄の下向き三角からview compiledを選択するとcssに変換できます。

ちなみにhtmlの構造、1カラムの時の話かどうか等がわらないため#mainで説明しています。

全画面にするには、width: calc(100vw – スクロールバーの幅);
jQueryでやるなら、window.innerWidth等で画面幅は取得できます。

回答いただきありがとうございます。
教えて頂いた内容をもとにCSSをカスタマイズして
そのクラスでもとのコンテンツ要素を内包するイメージでやってみましたが、
やり方が悪いのか、コンテンツ要素の裏に少し位置がずれて表示される状況です…

HTML構造は１カラム広めを設定しています。
カスタマイズは、ヘッダー部のナビゲーションの位置を変更しているだけで
コンテンツ部は特にカスタマイズしておらず、borderを0にしているくらいです・・・

width設定は追記して頂いた全画面での設定です。

おかげさまで自己解決致しました。

<div id="contentswrap">
  <div class="contents">
  コンテンツ部・画像
  </div>
</div>

#contentswrap{
	margin-left: -100%;
	margin-right: -100%;
	padding-left: 100%;
	padding-right: 100%;
 background-color:#263770;
}

.contents{
 background-color:#263770;
 color:#fff;
 padding:5%;
box-sizing: border-box;
}

この方法でレスポンシブ効いた状態でCSSのみでなんとか行けました。
ご丁寧にありがとうございます。

サンプルをアップデートしました。

つまりはこんな感じです。

前から何度も書いてますが、htmlの構造やその他のcssの影響を受けたりしますので、そこらがどうなっているかがわからないと正しくは答えられませんが、前レスで書かれたようなhtml構造の中に画像があるとしたら、こんな風に書けます。