横と縦のスクロールバーを消したのですが、 下記の5%分、liの中の、テキスト情報などのインライン要素がずれて真ん中になりません。

・わかりにくいので下記で再現してみました。こちらを見てみてください。
https://jsfiddle.net/80od313c/10/

下記サイトのサンプル３の方法で、横とたてのスクロールバーを消したのですが、
下記の5%分、liの中の、テキスト情報などのインライン要素がずれて真ん中になりません。
text-align: center;は値での指定ができないようですが、どうずれたぶんずらすのでしょうか？

width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す */
height: 101%;/* 下のスクロールバー */

http://qiita.com/naru0504/items/ff0c77775223dc5a9148

・CSS

/* 左から出てくるdrawer-menu */
[id="drawermenu"] {
z-index: 300;
width: 100%;
height: 100%;
position: fixed;
top: 0;
overflow-y: hidden;
padding-top: 2.8rem;
text-align: center;
cursor: pointer;
margin-left: -100%;
transition-propety:all;
transition-duration:1s;
}

[id="drawermenu"] ul {
overflow-y: scroll;
overflow-x: scroll;
width: 105%;/* 横のスクロールバーをはみ出して、上記のhiddenで隠す */
height: 101%;/* 下のスクロールバー */
}

[id="drawermenu"] li {
margin-bottom: 0.2rem;
background: rgba( 229, 228, 255, 0.3 );
}

[id="drawermenu"] li a {
height: 6rem;
line-height: 6rem;
margin: 0 auto;
color: #fff;
font-size: 2rem;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,.9);
}

@media (min-width: 960px) {
[id="drawermenu"] li a {
font-size: 2.5rem;
}
}