Footer problems

Hello:
For my footer, I am using just a background image with the dimensions of 960 X 85. In my style.css in the child theme, I have this declaration for the footer:

#footer {
max-width: 960px;
background-image: url(“http://doca.org/responsive/wp-content/uploads/2015/02/footer_bg.jpg”);
background-repeat: no-repeat;
}

If you look at the footer at http://www.doca.org/responsive, you will see the issue. I don’t know why it is skewed to the left and with a gap at the top. I experimented with it and I have to make the left margin 150px to get it in line with the container. I also have to make the top margin -20px so there is no gap. I don’t mind doing that, but for some reason, I think there is a proper way to do this and this is not it.

Another issue is that if I do take that band aid approach and get the footer positioned where it should be, the footer is not responsive. For example when I size down my screen, it cuts it off…unlike the header that properly reduces the size of the image with the screen. For the header I used the dashboard customize/header image and simply added the image from my media library. So there must be something that is making it responsive and not the footer.

If someone could give me some advice, I would greatly appreciate it. Thanks in advance.

David