CSS: right : 0px ; property is not working - html

Question

The code is as follows:
.form-wrapper {
border: 1px solid rgb(68, 240, 0);
background-image: radial-gradient(rgb(252, 252, 252), #ffffff);
border-radius: 20px;
width: 400px;
position: relative;
padding: 10px 40px;
margin: 10px auto;
}
.close-button {
position: absolute;
right: 0px;
left: auto;
border: 1px solid rgb(240, 0, 0);
width: 40px;
}
.form-header {
border: 1px solid rgb(232, 0, 240);
position: relative;
text-align: center;
}
.form-header h3 {
display: inline;
}
.form-outline {
border: 1px solid rgb(237, 250, 235);
border-radius: 20px;
padding: 5px 30px;
}
.form-field {
margin-top: 5px;
}
.form-field input {
outline: none;
width: 100%;
display: block;
padding: 5px;
font-size: 15px;
border: 2px solid rgb(179, 177, 177);
border-radius: 6px;
background-color: rgba(227, 247, 250, 0.918);
}
.form-field small {
display: block;
visibility: hidden;
}
<div class="form-wrapper">
<div class="close-button"><i class="far fa-times-circle "></i></div>
<div class="form-header">
<!-- <div style="border: 2px solid aqua;"></div> -->
<h3> Lets talk!</h3>
</div>
<form class="form-outline">
<div class="form-field">
<label class="field-title">Name </label><br>
<input type="text" id="" value="" placeholder="Enter your name."> <br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Phone </label><br>
<input type="text" id="" value="" placeholder="Enter your phone number."> <br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Organization </label><br>
<input type="text" id="" value="" placeholder="Enter your organization's name."><br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Address </label><br>
<input type="text" id="" value="" placeholder="Enter your address."> <br>
<small class="error-message">Error message</small>
</div>
<div class="form-field">
<label class="field-title">Email </label><br>
<input type="text" id="" value="" placeholder="Enter your email."> <br>
<small class="error-message">Error message</small>
</div>
</form>
</div>
The result looks like this.
I want to move the "close button" to the right side sticking to the green border of form-wrapper div. The right property is not working. I don't know if it is a silly mistake or lack of knowledge. Any help or direction would be appreciated.
I tested the right property using another html file and it is working perfectly. But I could not move this close button to right.

Answer 1

try to add this to your close-button class. it worked for me.
.close-button {
direction: rtl;
}

Answer 2

Your code is fine and should work propely. Maybe your styles without right: 0px; is cached by browser. Try to open your project in new private / incognito tab. It prevents browser to read cached styled.