35283108

Title: How to center a floated list

This is what my page looks like: 

[![enter image description here][1]][1]

Now when I add another post:

[![enter image description here][2]][2]

It is aligned to the left, but I want them to be centered. 

How can I center them?

<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

    #demo {
        float: left;
        margin: 0 auto;
        width: 980px;
        list-style: none;
    }
    #demo li {
        background: #fec722;
        float: left;
        margin: 10px 0 10px 15px;
        width: 178px;
    }
    #demo img {
        height: 243px;
        margin: 3px;
        width: 172px;
    }

<!-- language: lang-html -->

    <ul id="demo">
        <li><img src="http://goo.gl/0nSAIH"></li>
        <li><img src="http://goo.gl/0nSAIH"></li>
    </ul>

<!-- end snippet -->

([JSFiddle][3])


  [1]: http://i.stack.imgur.com/LtyDQm.png
  [2]: http://i.stack.imgur.com/v281Cm.png
  [3]: https://jsfiddle.net/SarpSTA/tm91znz2/