css - div の左右の静的マージン、画面解像度に合わせて調整

Question

絶対div内のラッパーを使用して、左右に固定マージンを取得する必要があります（相対で動作するはずですが、制限があります）。さまざまな画面解像度を使用した目的の結果のグラフィックを次に示します。

私が現在取り組んでいるのは、左の「幅 50px」の余白ですが、右の「幅 5px」は機能していないようです。

いくつかのことで javascript が役立つと聞いたことがありますが、この種の実装は見つかりませんでした。

CSS:

.main_wrap{
width:100%
position:absolute;
}

.div_contener {
position:absolute;
height:400px;
border:1px solid blue;
left:50px;
width:100%
margin-right:5px;
width:100%
}

.div_sub_wrapper {
position:absolute;
width:100%;
}

HTML:

<div class="main_wrap">

<div class="div_sub_wrapper">

<div class="div_contener">
<p>sample words</p>
</div>
  </div>
     </div>

フィドル

もう 1 つのことは、contenerクラスに固定サイズを使用すると、この 100% 幅で現在のようにスクロールするべきではないということです。