You are not going to be able to change the position of the logo.
This is the way your theme is designed and coded. The logo is to appear on the left hand side and be responsive. It is part of the HTML template of the theme and is set to be positioned structurally inside the header as the left most column.
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
Logo here
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
Menu here
</div>
</div>
</div>
</header>
The background image isn’t helping out either. If you are using that, you are designing your website to be too dependent on it. The flaw is, that it will not look good at many different devices such as tablet and cell phone (have you tried looking at it on those devices?).
If you absolutely need to use it, then you need to rescale it down with Photoshop and place a lot of black space around it and center it, kind of like looking into a cylindrical peep hole idea – hope that makes sense.
