"API" list item in the footer is misaligned on smaller-width viewports

Question

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 980px width:

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>

Answer 1

This bit of CSS also causes trouble in the normal view:

Where there is a white row between all the different elements. This might be intentional, but then this is the wrong fix for the "problem".

The right fix would be to apply a margin-bottom to the previous element in the list, as that doesn't offend the display when shrinking to different screen widths.

Using Margin bottom on "Business"

Full width:

Medium width:

Small width: