Trouble horizontally centering <div> containing <ul>
One simple solution is to remove text-align: left from li elements and use display: table to ul:
.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;}<div class="body-news"> <ul id="newsbar"> <li> <p>Widget1</p> </li> <li> <p>Widget2</p> </li> <li> <p>Widget3</p> </li> </ul></div>
You need to remove the float on the list items and change them to inline-block.
#newsbar li{ text-align: left; display: inline-block; max-width: 300px; margin: 15px 20px; }Updated fiddle: http://jsfiddle.net/0g9z5mmw/4/