Blank space/gap under navigation bar only on iPad view?

Issue

Space under navigation bar

Hey, I've only just began working on a website for a few weeks, and I've got no idea how to use html code. I tried adding code on here but it wasn't working for some reason. My problem is there is a large blank space under the navigation bar (picture above) in my website that only comes up when holding iPad in landscape view. I have tried everything, and think it might be able to be fixed by adding a media query for iPad. Please help me fix this if you can!

Thanks.

Solution

You need to add this media query in css with font-size and padding reduce

@media only screen and (max-width: 1024px) {
#main-nav ul li a {
    float: left;
    color: #EEEEEE;
    font-family: arial;
    padding: 0 5px;
    line-height: 42px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 14px;
}
}

Answered By - Hiren Vaghasiya