Next page button not displaying on right side

HTML-CSS
1

I am facing problem with move to next page button not displaying on right side of the page when I am on first page however when I am on second page it works fine. Any help is appreciated.

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"> &laquo;page 1</a>
                    <a href="#" class="pagination__next">page 2 &raquo;</a>
                        -->
            </div>
2

You’ve provided us with only style of your button, and we couldn’t help with your problem with this…

You should provide love working demo of hosted on codepen or github something if you can, so that we can figure out actual problem

3

The html file is very long it’s not possible to copy the whole file here.

4

Are both buttons always on the page?

If on the first page the previous button is not on the page (or on the last page the next button isn’t there) you can’t use justify-content: space-between because there will not be two elements to distribute the space between. You might be able to use auto margin (left/right respectively) instead. Or if you can use the content of the URL to check what page you are on (first/last) an attribute selector might work as well.

But as said, without some way of putting this code into some more context it’s hard to say anything.

Edit: An example of auto margin, I remove all the other CSS to make it more clear:

.pagination {
  display: flex;
  &__previous {
    margin-right: auto;
    margin-bottom: 0.5rem;
    margin-right: 1rem;
  }
  &__next {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    margin-left: auto;
  }
}
5

I tried using margin -auto but it moves one button to the left and the other in the middle. And it still didn’t solve the problem of moving the next button to right side.

could please elaborate more on this point on how to go about it. I have stored the page number in dataset attribute.

This is how it looks like:

button
button1559×501 645 KB

6

Is the pagination container full width? Are you sure you are using the correct margins (left/right) for the links?

Example (comment out a link to check the position of the other link)

Anyway, we need to see a live example or you have to put the code on GitHub so we can actually see what is going on, images are not useful.

7

Thanks that worked for me but also I had to make a small change in the code too.

8

I found the solution I had to assign the mark-up to the parent div.

9