たぶん、
#footer-widget {
margin: 10px auto;
text-align: left;
padding: 0 5%; /*これ*/
}
ではなかろうかと思うんですが、#footer-widgetの子要素の各left,center,rightにもpadding:10pxが入っているので余白自体は最小限になるかと思います。でそうすると各子要素の境界がわからないので、
#footer-widget {
padding: 0;
}
#footer-widget > div {
width: 30%;
padding: 0;
/*border: 1px solid #fff; /*確認用*/*/
}
#footer-widget > div:nth-child(2) {
margin: 0 5%;
}
こうすると#footer-widgetの子要素は余白を持たず、子要素が3つあるので、その中央の要素の左右に5%の余白を作り、30% * 3 + 10%で、ばっちり均等揃えできるんじゃなかろうかと。
スマホでフッターを出す場合はメディアクエリで書きなおしたりしないといけませんけれども、タブレットなどなら%で書いてあるので読めないほどに幅が狭まることはないのでは無いかと思います。