My symbols won't fit in the div for slideshow-CodePudding

My goal here is to create an image slideshow. I'm trying to add the left and right arrows on each side, however my right arrow won't fit in the div. I'm kind of a beginner so bear with me, I was following w3 schools on the slideshow tutorial to make sense of things. I don't want to copy literally everything from w3 schools but like i said i'm a beginner and i'm trying to make sense of things. My next goal is to move on to js and try to solve things there myself.

    <html>
<head>
    <title>Practice</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="myscript.js"></script>
</head>

<body>


<div >

    
    <div  >
        <img id="city" src="NYC.jpg">
    </div>

    <div  >
        <img id="king" src="KING.jpg">
    </div>

    <a id="prev">&#10094;</a>
    <a id="fwd">&#10095;</a>

</div>





</body>

</html>




````
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.container {
    background-color: yellow;
    height: 65vh;
    width: 95vw;
    margin: 75px auto;
    

}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.regular-img {
    display: none;
}

a {
    cursor: pointer;
    /* color: white;
    opacity: 0.7; */
    position: absolute;
    top: 50%;
    font-size: 18px;
    user-select: none;
    font-weight: bold;
    padding: 16px;
    margin-top: -22px;
    width: auto;

}

#fwd {
    right: 0;
}

enter code here

CodePudding user response：

Okay, the fellow developer no need to be afraid just add position: relative to .container and you will be good to go. It is because when you give something a position absolute it will relate to the closest parent element whose position is relative. if none is present it will relate to the HTML element so by adding a relative property to the .container right arrow will relate to its parent container and will stay in the container. Google the difference between position relative and absolute and you will have a better understanding

CodePudding user response：

The solution here is very simple. You have added position: absolute; to the arrows. But you didn't add position: relative; to the parent div.

All you have to do is add this :

.container {
    position: relative;
}