How can I stop an image sized with percentage from leaving the remaining image size as a margin?

I'm trying to size an image like this:

.logo {
  width: 50%;
}

which makes it render like this with the remainder of the image size as a margin on the right

but when I statically assign it's size like so:

.logo {
  width: 182px;
}

it doesn't add the margin.

So the question is... how do I get a result like the bottom image, whilst using a percentage to scale the image down?