Responsive Anomaly — Entry Content Cut-off on Left-Side

#1
Hi Everyone— And Happy Chinese New Year

This one's got me stumped.

My pages on BuySubliminal.com have some horizontal play— moving a couple centimeters from left to right.

But the real problem is that the .entry-content is cut off on the right-hand side. Get this, it is only cut-off for one media query— for the DWB/Design/Responsive—Tablet Landscape Cascading @media query (1st) which is set to 1024px— (Ipad Pro 1024x1366).

It also only occurs on Firefox, I haven't tested it on Chrome, but on Safari the responsive page loads as it should.

I've tried everything I could think of to fix the issue but am out of my depth. Any help would be most appreciated.

Maybe there is a syntax error that I'm overlooking.

Here are the styles that I've entered in the Query Box.


/* HOME CUSTOM WIDGET AREAS*/

.top-home-left {
float: left !important;
width: 50% !important;
max-width: 100% !important;
}

.top-home-middle {
float: left !important;
width: 50% !important;
max-width: 100% !important;
}

.top-home-right {
float: none !important;
width: 90% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* HOME TYPOGRAPHY*/

body.page-id-4 .content .page .sub-title {
margin-top: -0.3em !important;
}

body.page-id-4 .content .page h2 {
margin-top: -1em !important;
font-size: 2.4rem;
}

body.page-id-4 .content .page h5 {
font-size: 1.8rem;
text-transform: uppercase;
padding-top: 0.39em;
padding-bottom: 0.135em;
}

body.page-id-4 .content .page h3 {
font-size: 2.2rem;
padding-top: 0.39em;
padding-bottom: 0.135em;
}

/* HOME IMAGES*/
body.page-id-4 .content .wp-image-5471 {
width: 350px;
max-width: 100%;
}

body.page-id-4 .content .caption-attachment-wrap-right {
float: right;
width: 350px;
max-width: 100%;
padding-left: 1.39em;
padding-bottom: 0.618em;
}