title: HTML table with alignment problems
body: <p>I have these two tables in the <code>blog_Sec</code> div of my website's footer, which has 2 alignment problems:</p>
  
  <p><strong>1)</strong> The tables have headings, and these headings are not in center relative to the table. They appear slightly to the right.</p>
  
  <p><strong>2)</strong> The tables themselves are not in the center. They are left aligned currently. I want them to be center aligned within <code>blog_Sec</code> div.</p>
  
  <p><strong>JSFiddle code:</strong> <a href="http://jsfiddle.net/ahmadka/ukcS8/" rel="nofollow noreferrer">http://jsfiddle.net/ahmadka/ukcS8/</a></p>
  
  <p><strong>JSFiddle full page preview:</strong> <a href="http://jsfiddle.net/ahmadka/ukcS8/show/" rel="nofollow noreferrer">http://jsfiddle.net/ahmadka/ukcS8/show/</a></p>
  
  <p>Using <code>display: table-row</code>, I can solve the first problem, but then it removes the spacing between the heading and the table which doesn't look nice. So not really usable.</p>
  
  <p><img src="https://i.stack.imgur.com/YhOun.jpg" alt="enter image description here"></p>