The html part-code is:

<div >
                    <div ><i ></i></div>
                    <div >
                        <!-- <div style="border: 2px solid aqua;"></div> -->
                        <h3> Lets talk!</h3>
                        
                    </div>  
                     
                    <form >
                        <div >
                            <label >Name </label><br>
                            <input type="text" id="" value="" placeholder="Enter your name.">  <br>
                            <small >Error message</small>
                        </div>

                        <div >
                            <label >Phone </label><br>
                            <input type="text" id="" value="" placeholder="Enter your phone number."> <br> 
                            <small >Error message</small>
                        </div>

                        <div >
                            <label >Organization </label><br>
                            <input type="text" id="" value="" placeholder="Enter your organization's name."><br>  
                            <small >Error message</small>
                        </div>

                        <div >
                            <label >Address </label><br>
                            <input type="text" id="" value="" placeholder="Enter your address."> <br> 
                            <small >Error message</small>
                        </div>

                        <div >
                            <label >Email </label><br>
                            <input type="text" id="" value="" placeholder="Enter your email.">  <br>
                            <small >Error message</small>
                        </div>

                        
                       
                       
                        
                    </form>
                </div>

The CSS 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;
        }

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.

CodePudding user response：

try to add this to your close-button class. it worked for me.

.close-button {
direction: rtl;
}

CodePudding user response：

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.