Here's my own analysis about the issue, with a practical solution supplied.
Maybe the badges section shouldn't belong to "empty
posts"?
<div class="empty">
<h3>Keeping a low profile.</h3>
<p>This user hasn't posted... yet.</p>
<!-- MARK: div class="empty" should have ended here -->
<!-- The following part belongs to another div -->
<div class="user-panel _card">
<div class="subheader _level-2">
<div class="-title">
<h2>Rarest badges <span>(1)</span></h2>
</div>
</div>
<!-- Badges section here -->
...
</div>
</div><!-- / empty -->
<!-- Bug? "empty" shouldn't end here. It should be moved to MARK above -->
And this is the CSS part that's probably causing bad padding and wrong italic:
.empty{padding:30px;text-align:center;font-style:italic;color:#848d95;font-size:11px}
^~~~~~~~~~~~ ^~~~~~~~~~~~~~~~~
This is the correct code from a not affected page (where a user has at least a visible post):
<div class="user-panel _card js-top-posts">
<!-- "Newest Posts" section -->
</div><!-- / user-panel card -->
<!-- The above div is correctly ended there and doesn't affect badges section -->
<div class="user-panel _card">
<div class="subheader _level-2">
<div class="-title">
<h2>Rarest badges <span>(27)</span></h2>
<!-- Continuing badges -->
...
So, a simple fix would be moving the closing </div>
tag to the right place:
<div class="empty">
<h3>Keeping a low profile.</h3>
<p>This user hasn't posted... yet.</p>
</div><!-- / empty -->
<!-- ^ Just move it there -->
<div class="user-panel _card">
<div class="subheader _level-2">