Unwanted Header Padding On Wordpress Pages But Not Posts

HTML & CSS
1

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 :slight_smile:
Page example URL :mad:

Universal 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

.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.

2

On the bad page, you have a class on the <body> that is “page”. In your CSS you have it set that any .page img{}'s are given margin:20px 0; which is causing the space. Remove the “page” class on the <body> element on the bad page.

That affects all the images.

3

Thank you so much RyanReese! You nailed it exactly. Problem solved.

4

You’re welcome :). Glad I could help.