The navigation menu is not vertically centered on mobile

The padding-top or #main-outlet is 20px[1]:

The navigation bar’s bottom margin is 12px[2]:

The result is that the navigation bar is not vertically centered between the header and the main content:

image


My suggestion is to tweak some attributes/value(s) so the navigation bar is vertically centered:


  1. 1.25em ↩︎

  2. var(--nav-space): 0.75em ↩︎