子要素を左右に並べ、それぞれ片方だけ背景をブラウザいっぱいにしたいです

初めて利用します。
親要素のmax-widthを960pxに設定し、
横長の画像を一つ目は左寄せ、2つ目を右寄せに配置し、
それぞれの背景をブラウザ外側にだけ背景を伸ばしたいのですが、やり方が分かりません。。。

どなたかお助けいただけないでしょうか。

よろしくお願いいたします。。

【追記】申し訳ありません。試みたコードが未掲載でした。

<div class="oya"> <div class="ko1"> <p>テキストテキスト</p> </div> <div class="ko2"> <p>テキストテキスト</p> </div> </div>

.oya {
max-width: 960px;
margin: 0 auto;
height: 500px;
}

.oya .ko1 {
background: #26a69a;
margin: 0 calc(50% - 50vw);
padding: 1px calc(50vw - 50% );
width: 40%;
padding-right: 0px;
}

左寄せはなんとかできそうなのですが、右寄せの方法が分かりません。

よろしくお願いいたします。

hatena19

2021/01/20 13:41

現状のHTMLとCSSを提示してください。このままだと「丸投げ」の非推奨の質問になります。

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょう。

css
1.oya {
2  max-width: 960px;
3  margin: 0 auto;
4  height: 500px;
5  background-color: lightgray;
6}
7.oya > div  {
8  width: 40%;
9  margin: 0 calc(50% - 50vw);
10  padding: 1px calc(50vw - 50%);  
11  background: #26a69a;
12}
13.oya .ko1 {
14  padding-right: 0px;
15}
16.oya .ko2 {
17  margin-left: auto;
18  padding-left: 0px;
19}
20.oya > div > p {
21 background: #fff; 
22}