Image not center after adding anchor - html

Question

Im making a portfolio website for school and id like to make the first image in the slideshow clickable but when I wrap an anchor around it the image goes from center to the bottom right of the screen.
<div class="col-12 p-0 m-0">
<div class="slideshow">
<div class="programming-slides">
<img src="images/mlspprojectimage.png" alt="Machine Learning Stock Picker">
</div>
<div class="programming-slides">
<img src="images/AdobeStock_231690594.jpeg" alt="image">
</div>
</div>
</div>
.business-slides img, .programming-slides img, .webdesign-slides img, .architecture-slides img {
width: auto;
max-height: 70vh;
position: absolute;
margin: auto;
pointer-events: auto;
border-radius: 6px;
}
.business-slides a, .programming-slides a, .webdesign-slides a, .architecture-slides a {
width: auto;
max-height: 70vh;
position: absolute;
margin: auto;
pointer-events: auto;
border-radius: 6px;
}
slideshow {
width: 95%;
margin: auto;
overflow: hidden;
height: 80vh;
}

Answer 1

I see that your slideshow className wasn't .slideshow
.business-slides img, .programming-slides img, .webdesign-slides img, .architecture-slides img {
width: auto;
max-height: 70vh;
position: absolute;
margin: auto;
pointer-events: auto;
border-radius: 6px;
}
.business-slides a, .programming-slides a, .webdesign-slides a, .architecture-slides a {
width: auto;
max-height: 70vh;
position: absolute;
margin: auto;
pointer-events: auto;
border-radius: 6px;
}
.slideshow {
display:flex;
justify-content:center;
width: 100%;
margin: auto;
overflow: hidden;
height: 80vh;
}
<div class="col-12 p-0 m-0">
<div class="slideshow">
<div class="programming-slides">
<a href="/">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCA5N3QZN5XlgXqbsDDDJXBv6QizwUs3YuQX5QWtsTZIquainPKEGmnqcbPCdNpapoegg&usqp=CAU"
alt="Machine Learning Stock Picker">
</a>
</div>
<div class="programming-slides">
<a href="/">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9n7nTgLX7gD4EchFzaoC_Wx_rg6xjn11ityF0gKhMXH4wxlGVa4dXYF9tsdKM3Xh1BAA&usqp=CAU"
alt="image">
</a>
</div>
</div>
</div>

Answer 2

Fixed it by changing position to relative instead of absolute.

Answer 3

Have you tried creating a flexbox?
display: flex;
justify-content: center;