Trying to align all the content within my navigation bar

I've been stuck with the problem of trying to align all the content (logos, links and facebook icon) on my navigation bar to all be vertically centered. I've done some research and a good topic from StackOverflow came up, which can be found here: How to vertically center text with CSS?

I've tried the suggested ideas all to no avail. I'm really at a loss with this one and would appreciate any help in making my navigation look good across multiple browsers (mobile devices also).

Another issue I've come up with is being able to add content in the main body of the webpage. As you can see in the codepen below, some of the content written in the body is hidden by the header. I can add line breaks to fix this but I'm 90% sure the way I've laid out my content (header, main, footer all enclosed in body tags) is incorrect.

http://ift.tt/295VuZZ

Here is what I've done to try and fix the problem: headerLeft refers to the logo to the left of the links, and headerRight is vice versa. The header tag had a class of verticalAlignHelper but it seemed to do nothing so verticalAlignHelper isn't really being used now.

.headerLeft {
    margin-left: 30px;
    margin-right: 40px;
    float: left;
    height: 100%;
    margin-bottom: 0.25em;
    vertical-align: middle;
}


.headerRight {
    margin-left: 30px;
    margin-right: 40px;
    float: right;
    height: 100%;
    margin-bottom: 0.25em;
    vertical-align: middle;
}


verticalAlignHelper {
    vertical-align: middle;
    line-height: 150px;
    height: 150px;
}

Any advice is much appreciated. This is my first website so I'd appreciate if the advice was as basic as can be. Cheers.