How can I remove the strange gap/space below the pagination items in Bootstrap?
https://i.sstatic.net/zGhOD.png
Here's the code snippet:
<header role="navigation">
<!-- justify-content-end is only available on bootstrap 4 -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg justify-content-end">
<li id="high1" class="page-item"><a class="page-link" href="#anchor-1">1</a></li>
<li id="high2" class="page-item"><a class="page-link" href="#anchor-2">2</a></li>
<li id="high3" class="page-item"><a class="page-link" href="#anchor-3">3</a></li>
</ul>
</nav>
</header>
The CSS used for styling:
header {
position: fixed;
z-index: 99999;
padding: 0;
margin: 0;
border: 1px solid black;
}
header > nav {
padding: 0;
margin: 0;
border: 2px solid green;
}
.pagination {
margin: 0;
padding: 0;
border: 1px solid red;
}
.pagination>li>a,
.pagination>li>span {
border: none;
color: #000;
}
.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>li:last-child>a, .pagination>li:last-child>span {
border-radius: 0;
}
Check out the Codepen link for more details.
Any suggestions on how to fix this issue?