CSS в странице переполняется на мобильном сайте

Question

Рассматриваемый сайт:

http://www.thewaterqualitysolution.com/

код CSS, который я использую для столбцов:

.column1,
.column2,
.column3,
.column4
{
    column-rule-width: medium;
    width: 282px;
    max-width: 24%;

}

.column1,
.column2,
.column3
{
    float: left;
    margin-right: 24px;
    max-width: 24%;
}

.column4
{
    float: right;
    max-width: 24%;
}

Почему они не останутся в границах?

Answer 1

Глядя на сайт, вы дважды объявили правило CSS для столбцов. Ваша вторая декларация перезаписывает первую. Принуждение всех столбцов к ширине 282px. Смотрите default.css, строка 510.

Также я рекомендую вам прочитать этот пост для лучшего понимания ширины CSS и максимальной ширины.

CSS: ширина и максимальная ширина