Can't get my list items to center

[carrieu]

I have the following code and I want the list to center (right now it pulls to the left). Any idea why?\[code\]<div class="row" style="width:100%;text-align:center;"><div class ="banner span12" style="padding-top: 0px; padding-bottom:0px;text-align:center;"><p style="font-size:18px;padding-top:6px;"> Or Start Browsing the Library ... </p></center></div><br><br><ul class="nav nav-pills" style="text-align:center;"><li class="active" style="text-align:center;"> <a href ="http://stackoverflow.com/questions/13807021/#"> Library1 </a></li><li> <a href ="http://stackoverflow.com/questions/13807021/#"> Library2 </a></li><li> <a href ="http://stackoverflow.com/questions/13807021/#"> Library3 </a></li></ul>\[/code\]nav-pills CSS:\[code\].nav-pills > li > a { padding-top: 8px; padding-bottom: 8px; margin-top: 2px; margin-bottom: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}.nav-pills > .active > a,.nav-pills > .active > a:hover { color: #ffffff; background-color: #0088cc;}\[/code\]