How can I adjust the positioning of these two arrow indicators to be aligned with the left and right edges of the screen, regardless of size?
.arrow-container {
position: absolute;
top: 37%;
width: 95%;
display: grid;
grid-template-columns: 100px auto 100px;
align-items: center;
justify-items: center;
text-align: center;
-webkit-perspective: 5000;
z-index: 12;
}
.arrow-container > div {
height: 90px;
width: 40px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
border-radius: 5px;
background-color: #373639;
position: relative;
transform-style: preserve-3d;
transform-origin: center center;
transition: transform 200ms;
-webkit-backface-visibility: hidden;
transform: translateZ(0.35rem);
align-items: flex-start;
/*padding: 11px 17px 11px 17px;*/
font-size: 1em;
margin: 6px;
filter: drop-shadow(1px 1px 1px #100021) drop-shadow(1px 0.01em 1px #0d021a);
transition: background 200ms, transform 300ms;
}
.arrow-container > div span {
filter: drop-shadow(1px 1px 1px #100021) drop-shadow(1px 0.01em 1px #0d021a);
color: red;
font-size: 5em;
}
#right-arrow, #left-arrow {
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
.key-arrow {
}<div class="arrow-container">
<div id="left-arrow" class="key-arrow"><span>🢐</span></div>
<div id="right-arrow" class="key-arrow"><span>🢒</span></div>
</div>While the left indicator is correctly positioned at the left corner, the right indicator needs to be aligned to the right corner. How can I achieve this without success using grid? What are other options to consider?