Ralph, thank you very much for your helpful reply!
In the @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) - The max-width: 960px was supposed to be 768px, I had changed it to 960 when I was hacking around trying to get the configuration correct. I have changed it back to 768. Thanks for bringing that to my attention (doesn't seem to have any effect on the problem I am trying to solve).
I did not put in a new @media rule for viewports greater than 960px. Not sure I understand how that would help but I'm going to experiment with that.
I did try, per your suggestion, changing width from 960px to 100% in
That gets rid of the horiz scroll problem, but it causes all the content to be left aligned/not centered in the browser window. I tried adding margins: 0 auto 0 auto; to the rule above but that did not center the columns.
clearly I am lacking a good understanding of how to use the @media rules and how responsive design is implemented. I am determined to gain a complete understanding and this is part of the process. Any other help or advice you can offer will be very much appreciated.