html - CSS フッターが中央に表示されない

Question

私のウェブサイトのフッターにこのCSSを使用しています：

ページの中央に表示するにはどうすればよいでしょうか。私のウェブサイトはレスポンシブなので、画面を小さくすると自動的に互いの下に移動しますが、画面を大きくすると、右よりも左にずれます。

ここでフィドルを作成したので、html も表示できます: http://jsfiddle.net/x4A4B/

どんな助けでも大歓迎です

#footer {
    width:100%;
    min-height:500px;
    position:relative;
    bottom:0;
    left:0;
    border-top:4px solid #F36F25;
    background-color:#666666;
    color:#EEEEEE;
}
#footer-inner {
    width:80%;
    margin:0 auto 0 auto;
    height:inherit;
}
#footer-top {
    width:100%;
    padding-top:10px;
    border-bottom:2px #EEEEEE solid;
    display:block;
}
#footer-left {
    width: 290px;
    display:inline-block;
    padding: 5px 15px;
    border-right:1px #EEEEEE solid;
    vertical-align:top;
}
#footer-middle {
    width: 294px; /* Account for margins + border values */
    display:inline-block;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
    border-right:1px #EEEEEE solid;
    vertical-align:top;
}
#footer-right {
    width: 270px;
    padding: 5px 15px;
    display:inline-block;
    vertical-align:top;
}
#footer-bottom {
    margin-top:5px;
    padding: 15px 15px;
    font-size:12px;
}