Отрицательные поля Firefox и максимальная ширина больше 100% проблемы

Question

Я создал собственный код для своей темы Wordpress, и я думаю, что маржа и/или максимальная ширина больше 100% заставляют Firefox переполняться и отображать горизонтальную полосу прокрутки. Хром делает сайт штраф (вот сайт: http://bit.ly/1zXIxd5)

Это та часть, которая вызывает проблемы (я думаю)

@media all and (min-width: 800px) { 
#content img {max-width: 157.5%; height: auto; margin-left: -28.5%;} 
#okv {width: 157%; margin-left: -28.5%;} 
#okp {width: 80%; margin: 5% 10% 5% 10%;} 
.post .featured-image {margin-left: 28.5%;} 
} 

Так что, если кто-нибудь знает, как исправить это, пожалуйста, дайте мне знать. Вот мой полный код, если вам это нужно.

.header { 
position: relative; 
width: 100%; 
display: inline-block; 
padding: 2.3% 2% 0% 2%; 
text-align: center; 
} 

.post .post-content {font: 17px/1.6 sans-serif;} 

@media all and (max-width: 799px) { 
#content img {max-width: 100%; height: auto;} 
#okv {width: 100%; margin-left: 0;} 
#okp {width: 100%; margin: 0 auto;} 
.post .post-content {font: 14px/1.6 sans-serif;} 
.post .featured-image {margin-left: 0;} 
} 

@media all and (min-width: 800px) { 
#content img {max-width: 157.5%; height: auto; margin-left: -28.5%;} 
#okv {width: 157%; margin-left: -28.5%;} 
#okp {width: 80%; margin: 5% 10% 5% 10%;} 
.post .featured-image {margin-left: 28.5%;} 
} 

.nav a {font-family: Arial, Helvetica, sans-serif;} 

h2 {font-family: Arial, Helvetica, sans-serif;} 

.post .more-link:hover span {background: #e34234;} 

p.wp-caption-text {text-align: center; font: 13px/1.6 sans-serif;} 

p.mtx {font: 10px/1.6 sans-serif;} 

.post .more-link span {background: #f6f6f6; border-radius: 3px; padding: 6px 23px;} 
.entry-title {font-weight: bold;} 
.twentytwenty-handle {top: -50%;} 
.twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-horizontal .twentytwenty-handle:before {width: 1px;} 

.intro {display: inherit;} 

.comments-wrap { 
    width: 65%; 
    margin: 0px auto; 
    padding: 4% 0px; 
    font-size: 0.9em; 
} 

Answer 1

Маржа налево на изображение внутри тега привязки на линии 178 должен быть установлен в 0.

Вы могли бы сделать что-то вроде этого:

.post .featured-image { 
    margin-left: 0 !important; 
} 

.post .featured-image img { 
    margin-left: 0 !important; 
}