I am facing problem with placing the next page button on the right side of the page when I am only on the first page however its working fine when I am on second page .
CSS part
.pagination {
display: flex;
justify-content: space-between;
&__previous {
text-decoration: none;
display: inline-block;
background-color: $color-grey-light-5;
color: $color-black;
font-size: 1.5rem;
margin-left: 1rem;
margin-bottom: .5rem;
margin-right: 1rem;
padding: 1rem;
transition: all .2s cubic-bezier(.17, .67, .83, .67);
&:hover {
background-color: $color-grey-dark-4;
transform: scale(1.1);
color: $color-white;
}
}
&__next {
text-decoration: none;
display: inline-block;
background-color: $color-dark-red;
color: $color-primary;
font-size: 1.5rem;
margin-right: 1rem;
margin-bottom: .5rem;
padding: 1rem;
transition: all .2s cubic-bezier(.17, .67, .83, .67);
&:hover {
background-color: $color-grey-dark-4;
color: $color-black;
transform: scale(1.1);
}
}
}
HTML part
<div class="pagination">
<!--
<a href="#" class="pagination__previous"> «page 1</a>
<a href="#" class="pagination__next">page 2 »</a>
-->
</div>