I have setup a pagination system for a few pages on my site using some tutorials on the net. I have changed the colours in the CSS and that's all working and it's pretty much working on each page.

 

However, I can't position it where I want and it's stuck to the left side of the container divs. I try using margin-left to adjust the position and that's not moving it at all.

 

.pagination ul{border:0; margin-left:500px; padding:0;}
.pagination li{
border:0; margin:0; padding:0;
font-size:12px;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
color:#99FF00;
font-weight: bold;
}
.pagination a{
margin-right:2px;
}
.pagination .previous-off,
.pagination .next-off {
color: #999999;
display:block;
float:left;	
padding:3px 4px;
}
.pagination .next a,
.pagination .previous a {
color: #333333;

}
.pagination .active{
color:red;	
display:block;
float:left;
padding:4px 6px;
}
.pagination a:link,
.pagination a:visited {
color:#333333;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
.pagination a:hover{
background-color: white;
border: solid 1px;
border-color: #990000;
}

 

<ul class="pagination">
<li class="previous"><a href="/landscape/prints">«Previous</a></li>
       <li><a href="/landscape/prints">1</a></li>
<li class="active">2</li>
<li><a href="/landscape/prints_3">3</a></li>
<li class="next"><a href="/landscape/prints_3">Next »</a></li>
</ul> 

try some padding-left on your container div

I do have padding.

well you'd best either post all the code for the page or, preferably, a link

It's because you have:

.pagination ul

 

What ou are targeting there is the ul inside .pagination, which is not what you want since the ul HAS a class of pagination.

 

So change it to:

.pagination

or

ul.pagination

only change your first line of css.

like this And will do all right.

 

ul.pagination {border:0; margin-left:500px; padding:0;}