Just point your mouse cursor on the white space that you would like to get rid of -> right click -> inspect element -> and in the presented to you on the right hand side of the page find which CSS property and from what CSS file is responsible for that space and play with that CSS property value to see how the page pans out for you on the fly.
Yes I understand how to identify the element but not sure how to enter it into the custom.css file. Can you give an example using one of the elements I have screens hot water or show me how to do this?
According to your screenshots, your CSS styles seem to be served from cached files, on the evidence of their cryptic file names, and there is no sense to edit them as cache is temporary and those file names will change with time. We need to play with your CSS source files.
Is there any way you can upload your site on a remote server for me to have a look at it?
By the way, you created this thread under the "Helix-II" forum category. Is there a reason you develop your site on Helix-II, which we don't support any more? Why wouldn't you pick up Helix-3 instead?