子要素の片方を親要素からはみ出させる方法

Question

前提・実現したいこと

max-width: 960px;で組んでるんですが。
cssで左側いっぱいまではみ出させたいです。

どうすればよろしいでしょうか？

Comments

[s8_chu]

現状のコードを質問文へ追記していただけませんか？

[yambejp]

ちょっと意味がわからないので
手書きでよいので図示した画像をアップしてください

Answer 1

yambejpさんの雛形を拝借して、私なりにエスパーしてみました。

<div class="oya">oya
  <div class="ko">ko1</div>
  <div class="ko">ko2</div>
</div>

body{
  margin:0;
}
.oya{
  max-width: 960px;
  margin:0 auto;
  border:1px solid;
}
.ko{
  width:400px;
  border:1px solid;
}
@media screen and (min-width:960px) {
  .ko:first-child{
  margin-left: calc((960px - 100vw)/2);
  } 
}

親要素を画面の中央に配置しつつ、最初の子要素は左端に固定。

サンプル

Answer 2

意味がわからないので雛形だけ

<style>
body{
margin:0;
}
.oya{
max-width: 960px;
margin-left:50px;
border:1px solid;
}
.ko{
width:400px;
border:1px solid;
}
.ko:first-child{
margin-left:-50px;
}
</style>
<div class="oya">oya
<div class="ko">ko1</div>
<div class="ko">ko2</div>
</div>