I am facing an issue with a container that contains an image and a button on top of it. There seems to be some extra space created within the container on the right side which is taking up more space than necessary. The layout consists of three horizontal images aligned at the center using flex display with Bootstrap.
There are no specific width or height dimensions assigned, only the image behind the button.
<br>
<h1 class="text-center">What topics are you interested in?</h1>
<div class="row justify-content-around">
<div class="d-flex align-content-center flex-wrap container-img-interests">
<a href="#"> <br> <img src="/btn-development-eng.png" width="350px"/></a>
<button type="button" class="btn btn-primary" id="wrapper-button">Careers</button>
</div>
<div class="d-flex align-content-center flex-wrap">
<a href="#"> <br>
<img src="/btn-design-ux.png" width="350px"/></a>
</div>
<div class="d-flex align-content-center flex-wrap">
<a href="#"><br>
<img src="/btn-marketing.png" width="350px"/></a>
</div>
</div>
<div class="row justify-content-around">
<div class="d-flex align-content-center flex-wrap">
<a href="#"> <br>
<img src="/btn-business.png" width="350px"/></a>
</div>
<div class="d-flex align-content-center flex-wrap">
<a href="#"> <br>
<img src="/btn-community.png"width="350px"/></a>
</div>
<div class="d-flex align-content-center flex-wrap">
<a href="#"> <br>
<img src="/btn-production-audio.png"width="350px"/></a>
</div>
</div>
<br>
<div class="d-flex justify-content-center flex-wrap">
<a href="#"><img src="/btn-professional-growth.png"width="350px"/></a>
</div>
.container-img-interests {
border: 1px solid black;
display: inline-flex;
align-items: center;
text-align: center;
}
.container-img-interests > img {
position: absolute;
z-index: -1;
}
.btn {
right: 80px;
top: 40px;
position: relative;
z-index: 1;
}
https://i.sstatic.net/21uA9.jpg needs to be repeated to ensure a button is always positioned on top of these rectangles.