Saya sedang melakukan custom tema OJS (Open Journal Systems).

Masalah:
Pada tampilan mobile, terdapat jarak kosong (white space) yang terlalu besar
antara navbar (header) dan konten utama/hero section.
Masalah ini hanya muncul di viewport mobile.

Tujuan:
- Menghilangkan jarak vertikal yang tidak perlu di mobile
- Menjaga tampilan tetap rapi dan konsisten dengan versi desktop
- Navbar dan hero section terlihat menyatu secara visual
- Tidak merusak layout halaman lain (login, archives, article, search)

Permintaan perbaikan:
1. Audit padding dan margin pada elemen:
   - header / navbar
   - container utama
   - hero section / page header
2. Sesuaikan spacing khusus untuk breakpoint mobile (max-width: 768px)
3. Pastikan tidak ada margin-top atau padding-top berlebihan
   dari class global OJS atau Bootstrap
4. Hindari penggunaan spacer kosong atau wrapper berlapis di mobile
5. Gunakan pendekatan mobile-first

Kriteria hasil akhir:
- Navbar menempel rapi ke konten di bawahnya
- Tidak ada celah kosong yang mengganggu
- Tampilan terasa profesional dan modern
- Konsisten dengan halaman jurnal internasional

Tolong berikan:
- Analisis penyebab jarak tersebut
- Rekomendasi struktur HTML/CSS yang benar
- Rekomendasi penyesuaian media query khusus mobile
