Как убрать вертикальную полосу в 1px при выравнивании 3 блоков по 33.3%?

Question

[Максим Шадрин]

Всем привет.
Необходимо отобразить три блока равной ширины во весь экран.
Сделал это таким свойством:

.photo .single {
    float: left;
    width: 33.3%;
    display: block;
    text-decoration: none;
}

/*для каждого 3его делаю 33.4*/
.photo .single:nth-child(3n) {
    width: 33.4%;
}

Вот сайт

Но если менять ширину браузера, то время от времени проскакивает вертикальная полоса между 2 и 3 столбцами, а иногда между 1 и 2. С этим можно как-то бороться?
Пробовал так задавать ширину: calc(100%/3), не помогает.

Answer 1

[GruFF]

Просто добавь количество знаков после запятой. Поставь 33.33333333% и 66.66666667%

Comments

[Максим Шадрин]

почему в таком случае calc не дает результата, думаю любой ручной ввод будет менее точный, чем расчет браузера?

[Максим Шадрин]

Да и я ведь каждому третьему задаю 33.4, что в сумме дает четкие 100% (33.3+33.3+33.4)

[GruFF]

Максим Шадрин: Посмотри как устроен bootstrap например. Ты делаешь лишние действия nth-child(3n). Поставь 33.33333333% и посмотри что получится. А при использовании calc стоит учитывать особенности браузеров

[Максим Шадрин]

GruFF: не помогло, все равно полоска проскакивает при смене ширины

Answer 2

[HamSter]

.photo .single {
    ...
    width: 33.333%;
    margin-right: -1px;
...
}