How can I align a link to the bottom right? - html

Question

I want to align this link to right bottom. I already tried adding the below CSS but it only align in the container. I want it to be align in the hero-area.
.rt {
position: absolute;
right: 0px;
bottom: 0px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="hero-area hero-style-03 christian-hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Please check following, as i have changed container to container-fluid because you want it under hero-area.
a.hero-btn {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
<div class="hero-area hero-style-03 christian-hero-bg">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

Add Bootstrap's position:relative class, position-relative to your hero's classes:
.rt
{
position:absolute;
right:0px;
bottom:0px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="position-relative hero-area hero-style-03 christian-hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>
Absolutely positioned elements are positioned with respect to their closest positioned (non-static) ancestor, so setting position: relative on the hero makes the x move in relation to it instead of the body.

Answer 3

Yor master div position is up-left for fixing this problem you most give rt class to your master div.
Example
.rt
{
position:absolute;
right:0px;
bottom:0px;
}
<div class="hero-area hero-style-03 christian-hero-bg rt">
...
</div>
Or you most give all page space to div