Fixing Excess White Space Between Header and Content (Responsive)

Large gaps under the header are usually caused by padding, sticky headers, or empty sections.

Quick Universal Fix

Add this to assets/base.css:

.header,
.header-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#MainContent,
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

Mobile-Only Fix

@media (max-width: 768px) {
  #MainContent { padding-top: 0 !important; }
}

✅ Result: No more ugly empty gaps on mobile or desktop.