Check out my comment here – https://appfinite.com/topic/header-right-widget-area-menu-social-icons/#post-4818 …basically your title/logo area is 50% and your widget area is 65%….which exceeds 100%. When that happens the widget area has no choice but to fall off to the side. You can correct this by editing either the title-area or widget area (or both) so they both fit within 100% width.
Look around line 681 in your css for this –
.header-image #title,
.header-image #title a,
.header-image #title-area {
display: block;
float: left;
min-height: 120px;
overflow: hidden;
text-indent: -9999px;
width: 50%;
}
change the width to around 30% and it will fix it automatically.
Since the logo image is a background image for the #header it will automatically show up at the very top. Some people add space inside of the logo itself so it shows up on the site with space. You can also add space to the #head-wrap by adding padding to the top like this –
#head-wrap {
background: none repeat scroll 0 0 #303236;
margin: 0 0 40px;
padding: 40px 0 0;
}
That’s just an example, you can adjust the number to whatever works best for you. This can be found around line 630 in your css.
.
