When the screen width is less than 991px, the content is centered but the eye icon that is absolutely positioned goes off-center. This issue only occurs on devices with a small or medium screen size.
The reason for using absolute positioning on the icon is to prevent it from moving. The original code had a functionality to hide and show the password causing the icon to move based on the text length.
.card-plans {
-webkit-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
-moz-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
transition: 0.3s;
border: 1px solid grey;
}
.container-plans {
padding: 5px 28px 5px 28px !important;
}
.cred-title {
text-align: center;
font-size: 20px !important;
font-weight: bold;
}
.details {
font-size: 16px !important;
}
.details:not(:last-of-type) {
margin-bottom: 10px !important;
}
.current-plan {
font-size: 18px;
background: yellowgreen;
padding: 3px 15px;
display: inline-block;
}
.e {
margin-top: 50px;
margin-bottom: 20px;
}
.pass {
cursor: pointer;
}
.stars {
position: relative;
top: 0.45ex;
}
.x {
position: absolute;
/* top: 78px; */
left: 300px;
}
.card-plans {
border-radius: 10px;
}
@media only screen and (max-width: 991px) {
.center {
margin: 0 auto;
text-align: center;
}
.x {
position: absolute;
left: 600px;
}
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="e">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Credentials</p><br>
<div class="center">
<p class="details"><strong>Username:</strong> Joha Lee</p>
<p class="details"><strong>Password:</strong>
<span class="stars">****************************</span>
<i class="x fa fa-eye" aria-hidden="true"></i>
</p>
<br>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Current Plan </p><br>
<div class="center">
<p class="details"><strong>Type:</strong> Dxx Emails</p>
<p class="details"><strong>Plan Cost:</strong> 3332/ Month
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>