Hi Clavique, I am only writing here after many attempts to style the S2Membership Pro directory. I cannot seem to remove the list bullet points in the display and have the pagination not be vertical.
I normally have no issues with doing this kind of thing, so maybe S2member has something else I need to add to the CSS to get them to display correctly? As you see I was getting desperate with the important markup…
They display like this: 
**Here is my code for styling so far:**
div.ws-plugin--s2member-list div.ws-plugin--s2member-list-user-display-name {
display: flex; /* Use flexbox for layout */
align-items: center; /* Center items vertically */
border-style: solid;
padding: 10px; /* Apply padding to the block */
margin-block-start: 1em;
margin-block-end: 1em;
padding-inline-start: 1em;
max-width: 80%; /* Set a maximum width */
font-weight: bold;
list-style-type: none;
}
/* Styles for avatar */
img.avatar.avatar-48.photo {
height: 18px;
aspect-ratio: auto 48 / 48;
width: 18px;
padding-top: 20px; /* Add top padding */
padding-right: 15px; /* Add right padding */
padding-bottom: 5px; /* Add bottom padding */
padding-left: 5px; /* Add left padding */
display:none;
}
/* Styles for table rows and cells */
div.ws-plugin--s2member-list table.ws-plugin--s2member-list-user-fields>tbody>tr>td,
div.ws-plugin--s2member-list table.ws-plugin--s2member-list-user-fields>tbody>tr>td:hover {
width: 50%;
max-width: 50%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 8px;
color: #222;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-width: 0 1px 1px 0;
max-width: 80%; /* Set a maximum width */
}
/* Styles for first cell in first row */
div.ws-plugin--s2member-list table.ws-plugin--s2member-list-user-fields>tbody>tr:first-child>td:first-child {
border-radius: 5px 0 0 0;
font-weight: bold;
max-width: 80%; /* Set a maximum width */
}
/* Styles for even rows */
div.ws-plugin--s2member-list table.ws-plugin--s2member-list-user-fields>tbody>tr:nth-child(even)>td,
div.ws-plugin--s2member-list table.ws-plugin--s2member-list-user-fields>tbody>tr:nth-child(even)>td:hover {
color: #2F2F2F;
background: #fff;
font-weight: bold;
max-width: 80%; /* Set a maximum width */
}/* Adjusted list item styles within div.ws-plugin--s2member-list div.ws-plugin--s2member-list-user-display-name */
div.ws-plugin--s2member-list div.ws-plugin--s2member-list-user-display-name li {
display: list-item !important; /* Add important */
/* text-align: match-parent; */ /* Remove this line if you don't want to match parent */
margin: 0 !important; /* Add important */
padding: 0 !important; /* Add important */
/* Add other styles as needed */
}