Как в пагинации убрать отступ справа

[Espey]

Доброго времени суток. Подскажите пожалуста как в пагинации убрать вот этот отступ справа.

https://b.radikal.ru/b34/2003/45/546ccae6797c.jpg

Сайт: https://www.amen.in.ua/

[Espey]

Вот такой код помог:

.pagination li {
float: left;
}

[Nexus]

Еще можно так:
.pagination { font-size: 0; }
.pagination li { font-size: 13px; }

[Espey]

Отлично, спасибо!

[Malleys]

Nexus, такой способ не учитывает настоящий размер шрифта, который используется у родителя элемента постраничной разбивки. (1rem использует размер корневого элемента, а 1em невозможно использовать из-за font-size: 0; ) На самом деле проблема-то с отступами между элементами, следовательно нужно использовать правильный display!

Espey, я вам в данном случае рекомендую использовать display: table, поскольку в совокупности с этим свойством работает border-collapse, который позволяет убрать прогалы между элементами, а также вам не нужно вручную дописывать для border дополнительные свойства, чтобы убрать двойные рамки, когда элементы находятся рядом.

Ваш код, помимо проблемы, которую я описал вначале, на данный момент не учитывает также наличие прогалов при разных размерах экранов.

Вот исправленный код, для применения которого вам нужно сперва у себя на станице удалить все (кроме тех, что внутри @media print) селекторы, которые содержат .pagination

.pagination {
border: 1px solid #ddd;
display: inline-block;
border-radius: 3px;
overflow: hidden;
cursor: default;
}

.pagination ul {
display: table;
border-collapse: collapse;
border: inherit;
margin: -1px;
padding: 0;
}

.pagination li {
display: table-cell;
border: inherit;
}

.pagination a,
.pagination span {
padding: 7px 14px;
text-decoration: none;
display: block;
text-align: center;
}

.pagination a:not(.active) {
cursor: pointer;
}

.pagination span.pagenav {
background: #fff;
color: #444;
}

@media (max-width: 704px) {
.blog .pagination {
font-size: 0.8em;
}
}

@media (max-width: 663px) {
.pagination .pagination-next,
.pagination .pagination-prev {
display: none !important;
}
}

@media (max-width: 600px) {
.pagination li:first-child span,
.pagination li:last-child span,
.pagination li:first-child a,
.pagination li:last-child a {
position: relative;
text-indent: -500px;
}

.pagination li:first-child a:before,
.pagination li:last-child a:after,
.pagination li:first-child span:before,
.pagination li:last-child span:after {
position: absolute;
left: 0; right: 0;
text-indent: 0px;
}

.pagination li:first-child a:before,
.pagination li:first-child span:before {
content: '«'
}

.pagination li:last-child a:after,
.pagination li:last-child span:after {
content: '»'
}
}

Рабочий пример — https://codepen.io/Malleys/pen/bGdjmwK?editors=0100

[Espey]

А как в вашем коде рамку поуже, тоненькую сделать?