WP文件库中分页之间的空白

我尝试在页面中设置WP文件基分页样式。我在博客文章中使用过WP pagenavi，我把它做成了我想要的样子：数字并排放在盒子里。

由于我还没有找到将WP pagenavi与WP filebase一起使用的方法（我也读到它不适用于WP中的页面），我试图将WP filebase中的分页样式设置为相同，但我只将数字并排放在框中，但它们之间留有空白。

我试着用左边的空白来消除空白，但后来我遇到了其他问题。悬停时的边界不会显示在右侧。这些盒子似乎在右侧相互重叠。如何使用css修复此问题？

我的css如下：

    .tablenav-pages {
        clear: both;
        border-radius: 0;
        font-family: 'Gotham A','Gotham B', sans-serif;
        font-weight: 300;
        padding: 6px 14px;
        font-size: 15px;
    /*  margin-left: 6px;*/
    }
    .tablenav-pages a, .tablenav-pages span {
        text-decoration: none;
        color: #a30083;
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 6px 14px;
    /*  margin-left: -6px;*/
    }
    .tablenav-pages a:hover {
        border-color: #a30083;
        background-color: #fff;
        padding: 6px 14px;
    }
    .tablenav-pages span.current {
        background-color: #a30083;
        border-color: #a30083;
        color: #fff;
        padding: 6px 14px;
     }
    div.tablenav-pages {
        padding-left: 0;
        padding-right: 0;
        float: left;
    }