Displaced user-card, need some help with CSS

Product Support
3

Thanks for the replay. I made the following changes as mentioned, but it didn’t get as well as expected. See the below images after making the above mentioned change.

1
11920×1080 296 KB

2
21920×1080 310 KB

See the current custom CSS without making any new change.

@import url('https://fonts.googleapis.com/css?family=Redressed');
@import url('https://fonts.googleapis.com/css?family=Philosopher');

header #site-text-logo {
    font-size: 26px;
    //font-style: italic;
    font-family: 'Redressed', cursive;
    color: #2471a3;   //#5c998b;
    position: relative;
    top: -5px;
    left: 25px;
    filter: drop-shadow(1px 1px 1px #fff) drop-shadow(-1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff);
}

.d-header {
    padding: 0;
    height: 0; 
    background-color: #323433; // Header Background color
    width: 100%;
    padding-top: 0;
    height: 48px;
    box-shadow: none;
}

.d-header  .wrap {
    background-color: #fff;
    max-width: 1144px;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}

#main-outlet {
    padding-top: 70px;
}

/* lt. gray container around main content area */
#main {
  width: 1110px;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 0 25px 25px; 
}

.title-wrapper {
    padding-bottom: 1px;
}

.extra-info-wrapper .topic-link {
    font-family: 'Philosopher', sans-serif;  
}

.extra-info-wrapper .badge-wrapper.bullet span.badge-category {
    font-family: 'Philosopher', sans-serif;
    font-size: 13px;
}

#topic-title h1 a {
    font-family: 'Philosopher', sans-serif;
}

.badge-wrapper.bullet span.badge-category {
    font-family: 'Philosopher', sans-serif;
}

.d-header-icons .badge-notification {
    margin: 5px 0;
    //background: #00AEEF;
}

.d-header .contents {
   margin: 2px 0;
}
  /* dark gray background in body */
body {
  background-color: #323433;
  //height: 100%; 
    
}
html {
  background-color: #323433; 
    
}

/* set fixed container sizes */
div.full-width {
  width: 1110px; 
}
div.container {
  width: 1110px; 
}
.admin-content {
  width: 1110px; 
}
#user-menu {
  width: 1110px; 
}
.modal-outer-container {
  width: 1110px; 
}

/* keep reply control left justified */
#reply-control {
  left: 0;
  z-index: 999; 
}
  
/* login button color tweak for consistency */
.btn-primary {
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA); 
}
  
/* top nav & admin button colors */
.nav-pills li>a:hover { /* inactive button hover (lt. blue) */
  color: #009EDA;
  background-color: #CADCEF;
  border-color: #BDBDBD; 
}
.nav-pills li.active>a, .nav-pills li>a.active { /* active button static (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33); 
}
.nav-pills li.active>a:hover, .nav-pills li>a.active:hover { /* active button hover (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image:linear-gradient(to bottom, #00AEEF, #00B0F0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33),inset 0 -1px 2px rgba(0,0,0,0.2);
  color: white; 
}
  
/* side nav button colors (profile pages, etc) */
.nav-stacked li.active a, .nav-stacked li.active a:hover { /* active button static */
  background-color: #CADCEF;
  color: #333; 
}
.nav-stacked .active .icon-chevron-right, .nav-stacked .active:hover .icon-chevron-right { /* arrow bg */
  color: #333;
  background-color: transparent;
  text-shadow: none; 
}
.nav-stacked li:hover .icon-chevron-right { /* button arrow hover */
  color: #333;
}
  
/* topic list table styling */
#topic-list tbody tr:nth-child(even) {
  background-color:#F0F0F0; 
}
#main #topic-list th {
  background-color:#E6E6E6; 
}