前略、yasu さん

ちょっと、試している時間がないので、それっぽいリンクだけ貼ってみます。

子要素をコンテナーからはみ出して画面いっぱいに広げる方法

子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS

「コンテナの外側まで表示を広げる css」でググったら、ヒットしました。

ご自身で工夫してみてください。

リフィトリーさん

お時間のない中ご回答＆ご指導くださり、ありがとうございます！

早速試してみたのですが、子要素が複数あるため上手くいきませんでした。

やはり、例で挙げたサイトのように、footer.phpで要素を一括りにするセレクタ指定をするほかに方法はないのでしょうか？

@yasu さん

ちょっと苦し紛れではありますが、以下のCSSで試してみました。

#breadcrumb {
  width: 100%;
  padding: .6em calc((100vw - 1230px)/2);
}

@media screen and (max-width:1256px) { 
  #breadcrumb {
  padding: .6em 1em;
}

1256pxは、Cocoonのデフォルトのサイト幅です。

PCでも少しpaddingが必要なので、26px差し引いています。

カラム設定で、数値を変更されている場合は、サイト幅をデベロッパーツールで調べればわかるかと思います。

テストサイトで簡単にテストしただけなので、不具合があるかもしれません。

breadcrumbにはmarginが指定されているのと、wrapというクラスでwidthが指定されているので現在の見た目になっています。

投稿者:: @yasu

Widthをautoや100%にするとパンくずのテキストも動いてしまいます。

については、広げた分をpaddingで指定すればテキストは元の位置のままにできます。

なので

#breadcrumb {
  width: 100%;
  padding-left: calc((100vw - 1256px) / 2);
  background-color: #f00;
}

でご希望の動作になるのでないかと思います。

追記
文章書いてたらリフィトリーさんと被ってしまいました。

@yasu さん

一番下の波括弧が抜けていました。

#breadcrumb {
   width: 100%;
   padding: .6em calc((100vw - 1230px)/2);
}

@media screen and (max-width:1256px) { 
   #breadcrumb {
      padding: .6em 1em;
   }
}

メディアクエリを付けたのは、IEで画面幅に収まらなかったためです。

はる さん

申し合わせたように被ってしまいました。 ? 

リフィトリーさん　はるさん

こんにちは。返信が遅くなってスミマセン。

ご指南いただいたCSSで希望どおりになりました。

念のため各ブラウザや端末でもチェックしましたが完璧でした！

自力ではお手上げ状態で、諦めかけていましたが、みなさんに相談して良かったです。

本当にどうもありがとうございました！