Cenetral Горизонтальное выравнивание веб-страницы дизайна ячейки

Question

У меня есть веб-страница, которую я сделал некоторое время назад. Когда кодирование я не думал об оперативности и не реагировал на него, это является проблемой.

Когда окно находится в исходной ширины (в настоящее время установлен в качестве мин-ширина) страница выглядит следующим образом:

Когда окно находится между 960px и 1380px (моя максимальная ширина) я получаю странное середине пути белой каймой на правой стороне страницы:

и когда окно находится на уровне или выше 1380px страница выглядит следующим образом:

Обратите внимание: вам может понадобиться открыть местоположение изображения, чтобы увидеть границу на фоне белого фона stackoverflow!

Я пробовал много вещей, таких как смена поплавка для выравнивания по левому краю справа от поля и изменение поплавков чередующихся ячеек, но я не могу заставить ничего работать. Мне нужно, чтобы ячейки становились равномерно распределенными, а страница была изменена.

Вот мой css для элементов списка в настоящее время;

#server_features li{ 
    width:414px; 
    height:200px; 
    padding:10px; 
    margin:10px; 
    margin-top:20px; 
    margin-bottom:20px; 
    float:left; 
    border-width:3px; 
    border-style:solid; 
} 

Если вам нужна дополнительная информация, пожалуйста, не стесняйтесь спрашивать.

Answer 1

рабочий пример jsfiddle update example Первое: набор для ул

overflow: hidden; 

и удалить

position absolute; 

Следующая удалить максимум и минимум ширине, в и использовать медиа-запросов В запросах медиа установить уль ширину (рентабельность -left + margin-right + bodrer-left + border-right + padding-left + padding-right + width) в вашем примере ширина для одного столбца - 460px для 2-х колонок - 920px для 3 столбцов - 1380px и т. д. Я использовал ваш пример, и я изменил то, что написал выше, чтобы вы могли видеть, как он работает.