Q:

changing logo position in responsive theme

I'm using the ultimo theme, and have some issues with header logo position. 
My logo is a square box, with some graphics 'sticking out' on the left.  Let's say it looks like this:
http://goodlogo.com/images/logos/calvin_klein_logo_2623.gif
The K is the edge of the box, and the C is ‘sticking out’. 
In the default layout, this alignment looks no so good – the logo is too far right.  What I need is for the edge of the box (K), to be aligned with the left border of the page body/menu nav. 
If I force the CSS like this:

.header .logo-wrapper {       position: relative;
      left: -15px; }

It kind of works, moving the logo a little to the left and the alignment looks as I’d hope. 
But the responsiveness breaks.  I need to somehow adjust the css  when the small sizes kick in. 
How can I do that?  What is the best way to move the logo left?  
(I know this might be theme specific - but not sure, so asking anyhow.  I have a feeling this is more about responsive-theme handling in general)
update: here's a graphic to show what I mean: 

A:

Your approach for large screens is correct, but I would suggest using negative margin instead of left positioning.  Now, when the screen is smaller, your content container will ocupy all the width of the screen, so you cannot use a negative margin anymore because the logo will go outside the container, i.e. outside the screen.  
In this case you will have to reset the left margin to 0 like this:
.header .logo-wrapper { margin-left: -15px; }
media only screen and (max-width: 768px) { // You can change the breakpoint to whatever you want
    .header .logo-wrapper { margin-left: 0px; }
}

