Hello,
The template wasn't really designed for that large a logo so there wasn't any responsive settings tied to it. If you add the following code to the s5_responsive.css file it will rescale your logo at varying resolutions accordingly:
@media screen and (max-width: 1050px) {
#s5_social_bar { display: none; }
@media screen and (max-width: 1050px) {
#s5_logo_module { width: 75%; }
}
@media screen and (max-width: 750px) {
#s5_logo_module { width: 50%; }
}
@media screen and (max-width: 550px) {
#s5_logo_module { width: 35%; }
}
}
@media screen and (max-width: 450px) {
#s5_logo_module { width: 20%; }
}
In the other case I would set it back to float in the middle as you did before since using a margin in this case will require too much tweaking with responsive settings. The code above will dynamically resize your logo and you can tweak the settings as necessary.
You can also change the position of the button at the top of your site by targetting the following with a !important call.
#s5_drop_down_button {
-Mike