Who's Who List with user's Avatar

<style>
.whoClearfix::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.whovilleOuter {
width: 547px;
margin: 0 auto;
color: #fff;
background: rgba(0,0,0,.5);
border: 1px solid #FFF;
border-radius: 5px;
padding: 15px;
}
  .whovilleInner {
    margin: 0 auto;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: space-around;
flex-flow:wrap;
  }
.whovilleOuter a {
color: #fff;
text-decoration: none;
}
.whovilleOuter a:hover {
color: #ccc;
}
.whovilleOuter h2 {
text-align: center;
font-size: 20px;
font-family: "Special Elite";
text-transform: uppercase;
}
.whovilleMember {
width: 250px;
min-width: 250px;
max-width: 250px;
margin-right: 15px;
background: #000;
margin-bottom: 15px;
border-radius: 5px;
overflow: hidden;
  display: inline-block;
flex: content;
  font-family: "Special Elite";
}
.whovilleMember:nth-child(even) {
margin-right: 0;
}
.whovilleMember ul {
list-style: none;
margin: 0;
padding: 0;
}
.whovilleMember li {
padding: 5px;
}
  li.memberName {
    text-align:center;
    font-size: 1.5em;
    padding: 15px 5px;
    word-wrap: break-word;
  }

.whovilleMember li.charColor1 {
background: #66596A;
}
.whovilleMember li.charColor2 {
background: #3F2E36;
}
.whovilleMember li.charColor3 {
background: #424D0B;
}
@media only screen and (max-width: 767px) {
.whovilleOuter {
width: 280px;
}
  .whovilleMember:nth-child(odd) {
margin-right: 0;
}
}
  .whoCopy {
    text-align: right;
  }

</style>

<div id='whoville' class='whovilleOuter whoClearfix'>
<h2>Who's Who List</h2>
<div class='whovilleInner'>
<div class='whovilleMember'>
<img src='https://via.placeholder.com/250x400' />
<ul>
<li class='memberName'>Member Name</li>
<li class='charColor1'><a href='#'>Character 1</a></li>
<li class='charColor2'><a href='#'>Character 2</a></li>
<li class='charColor3'><a href='#'>Character 3 with a really long ass name</a></li>
</ul>
</div>

<div class='whovilleMember'>
<img src='https://via.placeholder.com/250x400' />
<ul>
  <li class='memberName'>Member Name is super long</li>
<li class='charColor1'><a href='#'>Character 1</a></li>
<li class='charColor2'><a href='#'>Character 2</a></li>
<li class='charColor3'><a href='#'>Character 3 with a really long ass name</a></li>
</ul>
</div>

<div class='whovilleMember'>
<img src='https://via.placeholder.com/250x400' />
<ul>
  <li class='memberName'>MemberNameissuperlongwithnospaces</li>
<li class='charColor1'><a href='#'>Character 1</a></li>
<li class='charColor2'><a href='#'>Character 2</a></li>
<li class='charColor3'><a href='#'>Character 3 with a really long ass name</a></li>
</ul>
</div>

</div>
  <div class='whoCopy'>
  	<a href='https://rpginitiative.com/'>Made by Morrigan of RPG Initiative.</a>
  </div>
</div>


<!-- Delete these instructions before you post this on your site. -->
<!-- This is the code to put in a Code Box for your members to add their Member section

	<div class='whovilleMember'>
		<img src='https://via.placeholder.com/250x400' />
		<ul>
			<li class='charName'>Member Name</li>
			<li class='charColor1'><a href='#'>Character 1</a></li>
		</ul>
	</div>

-->
<!-- This is the code to put in a Code Box for your members to add characters

<li class='charColor1'><a href='#'>Character 1</a></li>

-->

<!-- To add or change character colors copy this code in the CSS and edit to your desire. Make sure each class is unique:
    .whovilleMember li.charColor {
    background: #HEXCOLR;
    }
-->
<!-- END Delete these instructions -->

<!-- Leave everything below here alone but you can delete this line -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
<script  src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">