The reason it shows up to the left is because the logo itself was created with extra transparent space on the right side which makes it uneven – http://www.sheffieldtutoring.com/wp-content/uploads/2014/07/Logo1.png If you open this image up in Photoshop (or whichever software you use) you’ll see that the logo isn’t centered in the image due to the extra transparent space on the side of the image. I would edit the image and remove the extra space on the right of the logo so the image is either centered or has no space (or at least equal space on each side).
After you do that, you can make it show up in the center of the browser when the browser is resized (for mobile and tablet devices). To do that add this code to your responsive section (in the tablet/mobile area at the bottom) –
.site-title a {
background-position: center top !important;
}
Here is how the first image looks when you add the center code above and view it from a mobile device – http://i.imgur.com/AxSDhkH.png
And here is how it’s supposed to look when you adjust the image itself to be centered (with no space on the sides) and then add the center code from above – http://i.imgur.com/KZ5fF7O.png
.
