Элементы ширины видового окна ломаются

Question

У меня проблема с некоторыми элементами ширины видового экрана на моем веб-сайте. Есть восемь разделов подряд с шириной 10vw и разностью 2.2222vw. Вместе ширина видового экрана примерно чуть ниже 100 (что-то 99,9998). Дивы плавают, поэтому они должны оставаться в ряд.

Все работает отлично, но когда я добавляю заголовок, элементы разбиваются. В скрипке ниже divs ломаются без окна просмотра. Просмотрите демо-версию моего сайта для «реальной» проблемы.

Это мой элемент CSS (SCSS):

door { 
    width: 10vw; 
    height: 10vw; 
    border: solid 3px #000; 
    float: left; 
    margin-left: 2.222vw; 
    position: relative; 
    margin-bottom: 2.222vw; 
    a { 
     height: 100%; 
     width: 100%; 
     top: 0; 
     left: 0; 
     position: absolute; 
    } 
} 

.door.last { 
    margin-right: 2.222vw; 
    float: right; 
} 

FIDDLE | WEBSITE DEMO

Answer 1

Я думаю, что это может быть ваше решение, пожалуйста, попробуйте это

http://jsfiddle.net/bqx5u125/ 

Я добавил два класса, чтобы организовать дивы в горизонтальной и вертикальной манере. Таким образом, это будет css для этих горизонтальных и верительных div.

.arrange-horizontally > *{ 
display: inline-block;} .arrange-vertically > *{ 
display: block;} 

Кроме того, нет необходимости в классе «последний», а поплавок: право - главное, что вызывает у вас проблемы.