boxを中央配置した状態で、子要素（boxを基準に85％で指定した背景色）を全画面表示にさせたい

Question

boxを中央配置した状態で、子要素（boxを基準に85％で指定した背景色）を全画面表示にさせたいです

・上の画像は画面幅を3000pxにした時の状態です。
・紫色で囲っているのが中央配置したboxです。
・ピンク色で囲っているのがboxに対して85％で指定した背景色です。本来は右側の余白部分も背景にしたいです。

該当のソースコードはboxを中央配置にすることを第一優先に考え、max-widthを指定しています

<div class="concept">
  <h2>アリスの国</h2>
  <section class="wrapper">
    <h3>ふしぎなお話</h3>
    <p>
      　アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈しはじめていました。
    </p>
  </section>

  <section class="story">
    <div class="box_right">
      <div class="broken_right">
        <img src="https://picsum.photos/400/250">
      </div>
      <div class="wap">
        <h3>おもしろいお話</h3>
        <p>
          <span class="text_right">
            アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈しはじめていました。
          </span>
        </p>
        <a class="btn_decoration" href="#">MORE</a>
      </div>
    </div>
  </section>

  <!-- broken_left ---->
  <img class=" broken_left" src="https://picsum.photos/200/200">
</div>

a {
  text-decoration: none;
}

/* ---------------------------------*/
.concept {
  max-width: 125rem;
  margin-right: auto;
  margin-left: auto;
}

.wrapper {
  padding: 0 2rem;
}

.wrapper {
  max-width: 65rem;
}

.wrapper h3,
.wrap h3 {
  margin-bottom: 1rem;
}

.wrapper p {
  padding-right: 1rem;
  padding-bottom: 4rem;
}

/* brタグを非表示にする*/
.wrapper p br,
.text_right br {
  display: none;
}

.story {
  margin-top: 3rem;
  text-align: left;
  position: relative;
}

.box_right {
  width: 85%;
  margin-left: auto;
  background-color: pink;
}

/* broken_right */
.broken_right {
  text-align: right;
  position: relative;
}

.broken_right img {
  width: 90%;
  max-width: 50rem;
  position: relative;
  top: -4rem;
}

.wap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-bottom: 5.5rem;
  width: fit-content;
  margin-left: auto;
}

.wap h3,
.wap p {
  margin-left: 2rem;
  padding-right: 1.5rem;
}

/* ボタンの作成 */
.btn_decoration {
  position: relative;
  right: 2.5rem;
  bottom: 0rem;
  font-size: 1.2rem;
  display: inline-block;
  line-height: 3rem;
  padding: 0 0 0 3rem;
  margin: 2rem 3rem 0 4.5rem;
  z-index: 100;
}

/* 丸の作成 */
.btn_decoration::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
  z-index: -1;
  width: 2.5rem;
  height: 2.5rem;
  background: blue;
  border-radius: 50%;
  transition: 0.3s ease-out;
}

/* 矢印の作成 */
.btn_decoration::after {
  position: absolute;
  content: "";
  top: 42.5%;
  right: -1.5rem;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #000;
  border-right: 1.5px solid #000;
  transform: rotate(45deg);
}

/* ホバー時の挙動　faqボタンも共通*/
.btn_decoration:hover,
.btn_decoration_ct:hover {
  color: white;
}

.btn_decoration:hover::before,
.btn_decoration_ct:hover::before {
  width: 10.6rem;
  border-radius: 2rem;
}

.btn_decoration:hover::after,
.btn_decoration_ct:hover::after {
  border-top: 1.5px solid white;
  border-right: 1.5px solid white;
}

/* broken_left */
.broken_left {
  width: 35%;
  max-width: 26rem;
  position: relative;
  top: -3rem;
}

試したこと

HTMLの構造から変えようと思い、boxを基準にピンク色の背景を付けた子要素の階層を親要素と同じにしたのですが、上手くいきませんでした。

boxの中央配置と子要素（boxを基準に85％で指定した背景色）を全画面表示にすることの両方を叶える手段が見つけられません。

Answer 1

・紫色で囲っているのが中央配置したboxです。
・ピンク色で囲っているのがboxに対して85％で指定した背景色です。本来は右側の余白部分も背景にしたいです。

boxというのが何を指しているのか不明瞭ですが、
紫色で囲っているbox ＝ .concept要素
ピンク色で囲っている要素 ＝ .box_right要素
だとして回答します。

.box_rightそのものに背景色をつけるのでは、要素の外に背景色をはみ出させるのは難しいので、
.box_rightの疑似要素に背景色をつけて絶対配置(position: absolute;)にしてはみ出させたらどうでしょう。

はみ出させる量は、スクロールバーの幅の有無などを考慮して計算するのは難しいので、多めにはみ出させて、画面からはみ出た部分はbody{overflow-x: hidden;}で隠すようします。

.box_right の設定を削除して、下記を追加してください。

.box_right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15%;
  right: -100vw;
  background-color: pink;
  z-index: -1;
}

CodePenサンプル

Comments

[watakko]

ご回答いただきありがとうございます！
＞紫色で囲っているbox ＝ .concept要素
＞ピンク色で囲っている要素 ＝ .box_right要素だとして回答します。
その要素を指していました。説明不足で申し訳ないです。

最初から多めにはみ出させて、要らない部分を隠すという発想があったのですね。勉強になります。
そこでお聞きしたいのですが、overflow-x: hidden;をどこに指定したらいいかアドバイスいただけると嬉しいです。
実現したいことは、どの画面幅で見ても.box_right要素の背景が途切れず画面内に収まっている、かつスクロールバーが出ないようにすることです。
width: 100vh;とoverflow-x: hidden;をbodyや.box_right::beforeに指定しても上手くいかず、どうしたらいいのか悩んでいます。

[hatena19]

bodyに設定してください。
サンプルリンクも追加しましたのでご参考に。

[watakko]

ご連絡が遅くなり申し訳ありません。
Code Penでサンプル確認いたしました。ご丁寧にありがとうございます！

[watakko]

実は今回教えていただいたコードをVSC上で入力し、デベロッパツールで確認したところ、画面の最初の表示上では問題ないのですが、レスポンシブデザインで画面幅を広げた状態で横にスライドさせるとスクロールができてしまうのです。overflow-x: hidden;は効いているようなので、実際は問題ないのでしょうか？
質問の最後の部分にデベロッパツールで確認した時の画像を載せています。ご回答いただけると嬉しいです。
何卒よろしくお願いいたします。

[hatena19]

当方でもVSCodeでHTMLを作成して確認してみましたが、横スクロールはできませでした。
他の部分に問題があるのでは。

[watakko]

ご回答いただきありがとうございます。
自分のコードに問題がありそうです。原因を探してみます。
本当にありがとうございました！