Right Side of Image In Post Falls off When Screen Is Smaller or Larger

Hello all,

Here’s the mockup of the site design I’m working on:

http://www.masoneducation.com

As you can see, it’s fairly simple.

One of the problems I’m having, however, is that the black border of the image in a post falls off when the size of a viewer’s screen becomes smaller than approx 650px, or larger than 1200px.

If you try resizing your web browser beyond that middle area when viewing my site, you will see what I mean.

The image itself is sized down in the post to about 50%, so as to look clear on retina displays.

The image below it on the page is at actual size and doesn’t have this problem.

I’m thinking that the problem has something to do with the mobile settings of this responsive template I’m using. So, here’s a link to a text file that shows my current style sheet:

http://www.masoneducation.com/stylesheet.txt

If anyone could help me out as to what I need to adjust to fix this, I’d be sincerely appreciative.

I really just want the border of the image to be viewable no matter the screen size.

I also notice that the image becomes fuzzier when a larger screen size is attempted. So, I’m thinking the settings must be stretching it in some capacity.

Additional Problem:

A second problem I’m having is with the header. I’d very much like the logo in the header banner to always display perfectly justified with the post title and the left border of the image on the left side. For the most part, it does. But, it seems to adjust in terms of placement when I view the page on different screen resolutions too. Any ideas?

Extremely thankful for your help,

Josh from IL