How to re-position logo?

Been trying to figure out how to re-position my logo outside of the shapla container in the header but not having any success.

Tried adding
.shapla-container .site-branding .custom-logo{margin-left:-60px;}

.site-branding .custom-logo{margin-left:-60px;}

But that only seemed to make the logo smaller and out of the display window when viewing in smaller displays like 320-480. See screenshots for what I want and what is there now.

This is how it looks now (without the arrow):

This is how I’d like it to look only the same size for the logo as the original:

Any tips greatly appreciated.

Update: I’ve been able to figure out how to make the size the same by adding max-height: 175px; to the .site-branding .custom-logo and been trying to use media queries to look consistent at certain breakpoints but still cannot get it perfect. There is always a point where it is placed too close to the left edge of the screen no matter what breakpoints I use media queries for. Is there another way that may work without all the media queries?

• This topic was modified 7 years, 10 months ago by nootkan. Reason: added more text
• This topic was modified 7 years, 10 months ago by nootkan. Reason: more formatting and updated urls for screenshots
• This topic was modified 7 years, 10 months ago by nootkan.
• This topic was modified 7 years, 10 months ago by nootkan. Reason: Update