レイアウトに関して css 背景色を左側はいっぱいに右側に余白 右側を端を上の要素に合わせる

Question

画面幅が変わっても左側はいっぱいに右側に余白を取る、右側は画面幅が変わっても上の要素1080pxと揃えたい。
このようなことは可能でしょうか？
説明しづらいので画像でご確認ください。

宜しくお願いいたします。

Answer 1

擬似要素を使い背景色を作ることで自己解決に至りました。
投稿&考えていただき、ありがとうございました。

.haikei{
    width:1080px;
    margin:0 auto;
    background: #F9F8F7;
    position: relative;

    &::before{
        content: "";
        position: absolute;
        left:-1000px;
        width:1000px;
        height:500px;
        background: #F9F8F7;
    }
}
コード

Answer 2

こんな感じでしょうか。

<div class="wrapContent">
  <div class="redbox">
    width 1080px
  </div> 
 <div class="bluebox">
  <ul>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
  </ul>
 </div>
</div>

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.redbox {
  max-width: 1080px;
  text-align: center;
  color: white;
  padding: 50px;
  background-color: red;
  margin: 50px 100px 50px auto
}
.bluebox {
  background-color: blue;  
  margin: 0 100px 50px 0;
}
.bluebox > ul {
  list-style: none;
  max-width: 1080px;  
  padding: 50px;
  margin: 0 0 0 auto;
  display: flex;
  justify-content: space-around;  
}
.bluebox > ul > li {
  background-color: black;
  color: white;
  width: 25%;
  padding: 50px;
}

CodePenサンプル

Answer 3

<div class="wrapContent">
 <div class="content">
  <ul>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
  </ul>
 </div>
</div>

.wrapContent{
text-align:right;
background:blue;
}
.content {
display:inline-block;
text-align:center;
width:1080px;
}

これでどうでしょうか。