Here is a screenshot (freehand red circle included) of the "API" list item misalignment when the
@media screen and (max-width: 980px) media query kicks in for viewports of less than
The "API" and "Data" list items constitute a separate semantic group, however, they are considered to be a part of the "Stack Exchange Network" unordered list in the HTML markup with only visual separation (via the
mt16 CSS class increasing
margin-top for the first element which happens to be the "API" list item).
The above obviously leads to the "API" list item being pushed to the bottom. Moving the two list items to a
<ul> and applying
mt16 class to it would have prevented the issue from happening (content simplified for brevity):
<ul class="-list"> <!-- first group of list items --> </ul> <ul class="-list mt16"> <li>API</li> <li>Data</li> </ul>
md:mt0class is not taking effect. On it!