html - Trouble horizontally centering contaning -

html - Trouble horizontally centering <div> contaning <ul> -

i can't seem list center. li elements center fine seems can't ul center on page.

i need ul or ul's container width: 100%; want have background ul should stretch fill page width , ul+margin height.

i have looked around webb no answers seem fit needs, first question , i'm new scene please understanding if i've done wrong.

html (with php used in wordpress)

<div class="body-news"> <ul id="newsbar"> <li> <?php dynamic_sidebar( 'in-body-widget-area' ); ?> </li> <li> <?php dynamic_sidebar( 'in-body-widget-area2' ); ?> </li> <li> <?php dynamic_sidebar( 'in-body-widget-area3' ); ?> </li> </ul> </div>

css

.body-news{ } .body-news ul{ margin: 0 auto; overflow: hidden; text-align: center; } #newsbar li{ text-align: left; float: left; display:inline; width: 300px; margin: 15px 20px; }

one simple solution remove text-align: left li elements , utilize display: table ul:

class="snippet-code-css lang-css prettyprint-override">.body-news { } .body-news ul { margin: 0 auto; overflow: hidden; text-align: center; display: table; } #newsbar li { float: left; display:inline; width: 300px; margin: 15px 20px; } class="snippet-code-html lang-html prettyprint-override"><div class="body-news"> <ul id="newsbar"> <li> <p>widget1</p> </li> <li> <p>widget2</p> </li> <li> <p>widget3</p> </li> </ul> </div>

html css wordpress list