title: Left-Aligned <ul> Centered within Wrapper <div>
body: <p>The following ul is left-aligned and I'm trying to centre it within the #category_list div but I can't seem to get it right.</p>
  
  <p>I think the problem is that the ul doesn't wrap around its content but expands to full width.</p>
  
  <p>What am I missing here?</p>
  
  <p>Thanks for your help.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
  
  
      #category_list {
          padding: 1em 0 2em;
          text-align:center;
          border: 1px solid red;
      }
  
      #category_list ul{
          padding: 0;
          display:inline-block;
          text-align: left;
          border: 1px solid red;
          margin: 0 auto;
      }
  
      #category_list li{
          display:inline-block;
          width: 13.75em;
          padding: 1em 0;
          margin: 0 .5em 1em;
          border-bottom: 1px solid #aaaaaa;
      }
  
      #category_list h2{
          text-align: left;
          margin: 0;
          font: 1em "Georgia", Serif;
          font-style: italic;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
      &lt;div id="category_list"&gt;
          &lt;ul&gt;
          &lt;li&gt;&lt;h2&gt;Title&lt;/h2&gt;&lt;img src="_images/categories/img.jpg"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;h2&gt;Title&lt;/h2&gt;&lt;img src="_images/categories/img.jpg"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;h2&gt;Title&lt;/h2&gt;&lt;img src="_images/categories/img.jpg"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;h2&gt;Title&lt;/h2&gt;&lt;img src="_images/categories/img.jpg"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;h2&gt;Title&lt;/h2&gt;&lt;img src="_images/categories/img.jpg"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;h2&gt;Title&lt;/h2&gt;&lt;img src="_images/categories/img.jpg"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Spljw.jpg" alt="http://s17.postimage.org/xa0am2crj/centreleftlist.jpg"></p>