Centering banner ad in header and shrinking image for diff viewports

A client has asked me to add a banner ad in the header of a client's website. The problem is that it looks OK in browsers on a normal desktop resolution, but doesn't scale gracefully (and stay in the correct spot), when a browser window is a bit less wide than normal. I've set this up as a Generate Press element with a hook that displays the image "After Logo."

Here is the CSS I currently have, which is based on what I've found on the Internet. I'm also open to suggestions as to how to configure a centered banner ad without having to add a new widget area with a child theme.

@media (min-width: 768px) and (max-width: 1024px) {

.header-banner img {
max-width: 100%;
height: auto;
width: auto;
margin: auto;
display: block;
}

}