Weird Page Re-Sizing Issue With Responsive Template

So I'm having some weird page re-sizing with the responsive template. Using Google Chrome inspector I set the page size to 980px (or wider and it looks like the first attachment, then slowly making it smaller once it hits 979px it will adjust to the second attachment, for reference the second is how the site is set up through blocks in the backend, also for reference this template has properties set to fluid min of 280px and max of 1200. Then as you keep going smaller it jumps to the third attachment. Also what I find odd is with a browser width of 1024px or 768px (both pretty standard) it remains like the first attachment with really wide borders on the right and left, it's not re-sizing to the 1200 max with like instructed.

Any ideas?

[attachment=10671:980 px wide.JPG]

[attachment=10670:979px wide.JPG]

[attachment=10669:972 px wide.JPG]

972 px wide.JPG

979px wide.JPG

980 px wide.JPG

I would have to guess that it is because of the description on the right interfering.?

Please share the URL of your website

I would have to guess that it is because of the description on the right interfering.?

That's kind of what I thought but even the default homepage has those borders on the left and right and throw of the page sizing like that too, I just used a product page because it is so noticeable.

Please share the URL of your website

Current temporary link is here, however be advised that is my personal site that I am building it on until it is ready to go live where I will move it to it's own host somewhere other than GoDaddy under the root of thomasprod.com.

Try to add the following code to the CSS section of the theme editor:

.main-content-grid .ty-product-detail .ty-product-block__left {
    padding-right: 0px;
}