I have noticed that when I try to resize the webpage, the "read more" anchors/buttons also move. Is there a solution to keep them in place when resizing the web screen? I have already attempted using position fixed.
https://i.sstatic.net/Rviy8.png
This is the only code related to the issue, and I am using Bootstrap with minimal CSS.
<section class="second-section">
<div class="container-fluid">
<div class="row text-center">
<div class="col-md bg-white border">
<div class="card-1 text-left ">
<h1>Business <span>Mentoring</span></h1>
<p>Our mentors are leading professionals and experts in their field with a passion....</p>
<a href="#" class="readMore-anchor">Read more</a>
</div>
</div>
<div class="col-md bg-white border">
<div class="card-2 text-left">
<h1>Business <span>Coaching</span></h1>
<p>Our coaches are successful professionals and leaders in their field, who ....</p>
<a href="#" class="readMore-anchor">Read more</a>
</div>
</div>
<div class="col-md bg-white border">
<div class="card-3 text-left">
<h1>Personal <span>Mentoring</span> and coaching</h1>
<p>Is where we have professionals ready to work with a family,...</p>
<a href="#" class="readMore-anchor">Read more</a>
</div>
</div>
<div class="col-md bg-white border">
<div class="card-4 text-left">
<h1>Career <span>Exploration</span></h1>
<p>Career advice and exploration are vital if you want to maximize your potential in today's....</p>
<a href="#" class="readMore-anchor">Read more</a>
</div>
</div>
</div>
</div>
</section>
.card-1 .card-2 .card-3 .card-4 h1{
width: 100%;
font-size: 40px;
line-height: 50px;
font-family: "Montserrat Bold";
}
.card-1 h1 span{
display: block;
}
.card-1 .card-2 .card-3 .card-4 p{
width: 100%;
max-width: 325px;
font-size: 16px;
color: #232020;
line-height: 28px;;
font-family: "Montserrat Regular";
}
.second-section p{
margin: 0;
}
.readMore-anchor{
width: 100%;
height: 47px;
font-size: 16px;
max-width: 161px;
line-height: 50px;
padding: 15px 38px;
background-color: #8cd9f9; ;
}