#masthead {padding-top: 0;}

.header-image{margin-top: 0;}

<br /> #masthead{<br /> padding-top: 0;<br /> }</p> <p>.header-image{<br /> margin-top: 0;<br /> }<br />

Thanks!!!

excellent, thank you very much!!!!

one more query please as i have no idea on CSS. Do you know how to limit the spaces between the widgets on the sidebars?

I would like to limit the space between the footer area and the main body of the webpage.

Part of the space comes from the widget area just below the main body, which you can adjust with this CSS:

#supplementary {
	padding-top: 0;
}

And the rest of the space is coming from various content elements in the left sidebar, right sidebar, and content area. You can get rid of most of the extra space by setting the margin to zero for several areas:

#secondary .widget:last-child,
#tertiary .widget:last-child,
#image-8 img,
.widget_facebook_likebox iframe,
.page-template-showcase-php #content {
	margin-bottom: 0;
}

To adjust this, you should experiment by either changing the "0" to another value or removing some of the selectors from the list until the spacing looks good to you.

the blog is http://www.sporting-u.com

#posts .post-content {
	border: 1px solid blue;
}

#sidebar {
	border: 1px solid red;
}

If you are trying to increase the spacing between the main content area and the sidebar, one way would be to make both the content area and sidebar smaller and increase the margin between them. Here is an example you can start with:

#posts .post-content {
	width: 600px;
}

#sidebar {
	width: 280px;
	margin-left: 20px;
}

Adjust the numbers if you'd like to experiment.

Thanks for your help. I have messed around with the CSS and I've adjusted this bit in bold:

.singular iframe {
max-width: 100%;
width: 850px;
height: 70px;
}

That seemed to resolve the issue. Thank you for helping.

I've viewed your blog on Chrome, FireFox, and IE10 but cannot seem to see any large amounts of whitespace. Have you resolved this issue? If not, can you link to an example URL of where you can see the large amount of whitespace and give details of which browser you are viewing it on? Let me know if you still need help.

How do I rectify this?

I am using the Twenty Eleven theme and have the CSS upgrade. My blog is at http://mabelkwong.com.

Best Regards.

For help with self-hosted, standalone WordPress installs, you'll need to post over at http://wordpress.org/support/

Good luck.

Here's the code on the page:

'
Himself and Nora is alive with intelligent and witty tunes ranging from boldly anthemic to raucously funny to moving poignancy.

[gallery columns="4" ids="301,302,303,304"]

Direct from its stunning success at the 2012 New York Musical Theatre Festival, Jonathan Brielle's Himself and Nora has its first musical theater offering at UCPAC’s Hamilton Stage.
'

How can I go about editing things so that the white space is the same both above and below? Thank you!

display: none;

to the #navbar rule. That will tighten it up a little more. The add the following at the bottom of your CSS and play with the 40px value.

.postarea {
padding-top: 40px;
}

That should give you enough to get things tightened up where you want them.