right not working but left is at position: absolute;

Question

.act{
    text-align: center;
    height: 100%;
    width: 100%;
}

/* arrows*/
.left_arrow{
    top: calc(117.2% + 12.75vh);
    left: 19%;
    transform: rotateZ(90deg);
}

.right_arrow{ 
    top: calc(117.2% + 12.75vh);
    right: 19%;
    transform: rotateZ(-90deg);
}

.act img{
    position: absolute;
}

<div class="act">
            <img src="./landingPage/down arrow black.png" alt="left arrow" class="left_arrow">
            <img src="./landingPage/down arrow black.png" alt="right arrow" class="right_arrow">
</div>

The 'right: 19%;' at the .right_arrow is not working but 'left' is working at the .left_arrow .

Anyone knows why?

Answer 1

add position:relative; to .act class and it should work

the position:absolute; on the img element looks for a container to position itself against, this container has to have x, y, height and width values inside the DOM. giving the parent element (in this case .act) position:relative; ensures the element has a x, y, width and a height onto with the img elements can be placed