It's just right of center on my phone; if the blue block were divided into 4 columns, the menu would be the 3rd from left.
This is all I see for the NAV:
.container.nav {
margin-bottom: 0;
}
So that entire blue band is the container.nav. Have you tried making a DIV just for the nav within the blue section*, so it could be positioned to the right at full screens and shift to center at small/phone screens?
*would that be a sub-grid in RLM?
Also, is the tag-line supposed to disappear at phone size?
About using PNGs in resp. designs...They will get pixelated when scaled up from the original size. So start with a size that looks good at your largest screen width. Also, you can set a max-width to ensure it doesn't go beyond its optimal size.
If its original size is 400px wide (for example), put 'max-width: 400px;' in your logo CSS.
Another thought... If the Win8 phone (and my old Kindle) is the only screen/s that don't show the SVG file, you could have just a text title that would display in place of the image. Then you don't need to change your SVG image.