Boostrap Pagination Not Aligned

Can anyone help me align my pagination? Thanks, Jeremy.

Image of outputput
https://i.imgsafe.org/642b61ecdf.jpg

                  
<div>
<ul class="pagination">
  <li class="page-item"><a class="page-link" href="browse.php?page=23">&laquo;</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=24">24</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=25">25</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=26">26</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=27">27</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=28">28</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=29">29</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=30">30</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=31">31</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=32">32</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=33">33</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=34">34</a></li>
<li class="page-item"><a class="page-link" href="browse.php?page=25">&raquo;</a></li></ul>
</div>

Code (markup):

 

It's strange, because when I run a test it doesn't show them broken:

https://jsfiddle.net/dtp30sky/

1. Some other .css file is interfering with your bootstrap .css
2. Your bootstrap file is corrupted. You can copy and paste that .css code from the link above to see if it'll fix the issue.

 

Thanks for the reply. You're right. I found the conflicting rule, but strangely it's not an id attached to anything on the page it's causing the error on.

#page-rules ol, li{
   
   margin-left:24px;
   margin-top:8px;
   
}

Code (markup):

 

The li in this ruleset is not descended from #page-rules, it applies to all li elements unless overridden by rule order or a higher specificity. The comma makes the selectors siblings, not descendant.

cheers,

gary

 

I could help, if you kicked that idiotic bloated mouth-breathing halfwit idotic dumbass ignorant BULLSHIT known as bootcrap to the curb... what with the DIV for nothing, endless pointless classes for nothing, etc, etc just PISSING all over the markup.

Which means gutting the HTML down to just:

<ul class="pagination">
  <li><a href="browse.php?page=23">&laquo;</a></li>
	<li><a href="browse.php?page=24">24</a></li>
	<li><a href="browse.php?page=25">25</a></li>
	<li><a href="browse.php?page=26">26</a></li>
	<li><a href="browse.php?page=27">27</a></li>
	<li><a href="browse.php?page=28">28</a></li>
	<li><a href="browse.php?page=29">29</a></li>
	<li><a href="browse.php?page=30">30</a></li>
	<li><a href="browse.php?page=31">31</a></li>
	<li><a href="browse.php?page=32">32</a></li>
	<li><a href="browse.php?page=33">33</a></li>
	<li><a href="browse.php?page=34">34</a></li>
	<li><a href="browse.php?page=25">&raquo;</a></li>
</ul>

Code (markup):

With CSS something like this:

.pagination {
	overflow:hidden; /* wrap floats and margins */
	zoom:1; /* trip haslayout, wrap floats and margins legacy IE. Remove if you give a shit about IE6/earler */
	list-style:none;
}

.pagination li {
	dsiplay:inline; /* don't even TRY doing more with these */
}

.pagination a {
	float:left; /* since you want no gaps */
	text-decoration:none;
	color:#048; /* use a LEGIBLE colour, you clearly weren't */
	padding:0.25em 0.5em;
	border:solid #CCC;
	border-width:1px 0 1px 1px;
}

.pagination a:first-child {
	border-radius:0.25em 0 0 0.25em;
}

.pagination a:last-child {
	border-width:1px;
	border-radius:0 0.25em 0.25em 0;
}

Code (markup):

But no, keep on herping that derp with the presentational classes and fat bloated steaming pile of bullshit known as bootcrap whilst sleazing out two to four times the HTML needed and failing to grasp even the simplest parts of using CSS correctly.