Margin: 0 auto on mobiles always sets margin background-color to element background-color

Question

It's hard to formulate a brief title. What happens is that the background-color of the centered div extends to the left and right edges of the screen and the background-color of the body is ignored or overridden.

I'm using the twentythirteen theme for this document .

It sets a width smaller than the full width and uses margin:0 auto to center the content divs.

In a standard native web view component in our app on Iphone and Android, the automatic margin (left and right) does not become the background-color of the body, but white. Between elements in the content div the correct background-color shows through their margins.

Also, Chrome on Android shows the same white margins.

Have both leading OS developers decided that their respective -kits should do this, or what is going on? Note that the CSS validator throws up hundreds of errors - well, programming a proper theme from scratch is not in the budget for this project.

If you can link to a web page where this works, I could make the web view load that and check.

Answer 1

A background-color is set on several classes.

.entry-header, .entry-content, .entry-summary, .entry-meta {
    background-color: #ffffff;
    margin: 0 auto;
    max-width: 604px;
    width: 100%;
}

Delete the background-color and the issue will be fixed.