お世話になっております。

縦バナーを両側に表示したいので、
以下のように設定しました。

PCではきちんと出ますが、タブレットでは
右端からかなりずれて表示されます。

どのように解消すればいいかアドバイス
よろしくお願いいたします。

XXX、YYYは伏字に、YYYは140ｘ999ピクセルの画像です。

（ソース）
<!--▽お買い物マラソン左縦バナー-->
<div class="vbanner"><a href="XXX"></a></div>
<style>
.vbanner {
position: absolute;
min-height: 100%;
top: 100px;
width: 140px;
background: url(YYY) repeat-y scroll;
left: 0px; /* 画面左端とバナーの間隔（画面右端の場合はrightに変更してください） */
z-index: 1; /*重なり順の設定。ページ内他のパーツより上に出したい時は数字を増やす */
height: 6000px; /*縦バナーの高さ。ページの長さによって調整してください */
visibility: visible; /*縦バナーの表示・非表示（hidden＝消す、visible＝見せる）*/
}
.vbanner a {
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/*小さいモニタの場合非表示にする（一行下の1220を変更して調整可能）*/
@media screen and (max-width: 1220px) {
.vbanner {
visibility: hidden;
}
}
</style>
<!--△お買い物マラソン左縦バナー-->

<!--▽お買い物マラソン右縦バナー-->
<div class="vbanner2"><a href="XXX"></a></div>
<style>
.vbanner2 {
position: absolute;
min-height: 100%;
top: 100px;
width: 140px;
background: url(YYY) repeat-y scroll;
right: 0px; /* 画面左端とバナーの間隔（画面右端の場合はrightに変更してください） */
z-index: 1; /*重なり順の設定。ページ内他のパーツより上に出したい時は数字を増やす */
height: 6000px; /*縦バナーの高さ。ページの長さによって調整してください */
visibility: visible; /*縦バナーの表示・非表示（hidden＝消す、visible＝見せる）*/
}
.vbanner2 a {
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/*小さいモニタの場合非表示にする（一行下の1220を変更して調整可能）*/
@media screen and (max-width: 1220px) {
.vbanner {
visibility: hidden;
}
}
</style>
<!--△お買い物マラソン右縦バナー-->