li 是浮动的，所以其父元素需要 clearfix，不然会失去高度。

···
ul.pagination {
display: block;
padding: 0;
margin: 0;
border: 1px solid red;
overflow: auto; // clearfix
}
···

或者

···

ul.pagination {
display: block;
padding: 0;
margin: 0;
border: 1px solid red;
}

// clearfix
ul.pagination::after {
content: "";
clear: both;
display: table;
}
···

看你喜欢哪一种 clearfix 的方法了。

但是还是推荐用 flexbox 来解决，float+clearfix 有点旧了。