text-align: right; Not Woking - html

Question

Here is my code.I have minimized it as short as I can. In that text-align:right; is not working
.forgot {
color: red;
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>

Answer 1

As #TreyBake pointed out, center and u are not supposed to be used instead, you should use the text-align and em.
Also, here's the solution with setting right align to parent.
.forgot {
color: red;
}
.center-aligned{
text-align: center;
}
.right-aligned{
text-align: right;
}
<div class="content">
<div class="center-aligned">
<h3><em>LOREM IPSUM</em></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</div>
<br>
<div class="right-aligned">
Forgot details?
</div>
</div>

Answer 2

The align is set on the parent element. Not on the element itself.
.forgot {
color: red;
}
.content {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>

Answer 3

You can use text-align: right on a parent element. Create a div wrapping your link and give him the class. See example below:
html:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
css:
.forgot {
color: red;
}
.text-right {
text-align: right;
}
If you have Bootstrap installed, you can do all of this without css. Your html would look like this:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
Please note at time of writing, this is Bootstrap v4.2.1

Answer 4

Here's Why It's Not Aligning
You have your <a class="forgot"> element with the "Forgot Details" text inside of it. Since it's an <a> element, by default it will only stretch to be as wide as the text you place inside it. So as you can see in the screenshot below, your <a class="forgot"> element (highlit) is only as wide as the "Forgot Details" text. So your "text-align: right;" technically is aligning the text to the right, but since the parent container (the <a class="forgot"> element) is only as wide as the text, horizontally aligning it doesn't make a difference.
How To Fix It
Where an <a> element stretches only to fit its contents, a <div> element by default stretches horizontally to fill its parent container. So what you can do is enclose your <a class="forgot"> in a <div class="forgot-parent">, and then apply the "text-align: right" to the <div class="forgot-parent"> so that the <a class="forgot"> gets aligned to the right.
So the code will look like this:
.forgot {
color: red;
}
.forgot-parent {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="forgot-parent">
Forgot details?
</div>
</div>
Note how I removed "text-align: right;" from '.forgot' and added it to '.forgot-parent'. The result is shown below. First, here is the parent <a class="forgot-parent"> div highlit.
Note how the <div class="forgot-parent"> has stretched to the full screen width. Next the <a class="forgot"> is highlit:
Note that the <a class="forgot"> is still only the width of its contents (the "Forgot Details" text), but it's now aligned to the right within its parent div.