Wordpress header looks fine when viewing home page or blog posts. However, when you view pages, mysterious padding is added above and below any image in the header or footer file. So far, you can see that the logo gets pushed down as well as the social media icons. I had an image in the footer that did the same thing so this is a site-wide problem that only affects pages.

Post example URL
Page example URL

Universal CSS

Code CSS:
html, body, form, ul, li, table, td { margin: 0; padding: 0; }body { position: relative; color: #333; }
body, input, textarea { font-size: 13px; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a img { border: 0; }

Header CSS

Code CSS:
.wrapper { padding-top: 31px; }
#header { border-bottom: 1px solid #dedfe0; padding-bottom:20px;}
#site-logo { float: left; width: 210px; padding-right: 40px; }
#header-left { float: left; width: 210px; padding-right: 40px; }
#header-center { float: left; width: 210px; padding-right: 30px; }
#search { float: right; width: 220px; }
#header-right { margin: 20px 0 0 10px; }

Any insights will be GREATLY appreciated. Thanks beforehand.