CSS导航栏响应填充问题

Question

I have a navbar every thing looks great until it goes responsive. the bottom drop down has a 5 px gap all the way around it.

https://jsfiddle.net/nc2hamed/5/

i have tried adding and removing padding on the

.expand {
    max-height: 40em;   
}

Answer 1

You should remove some padding-top on .navbar .menu and set the max-width to 100%

@media(your_media_query) {
   .navbar .menu {
     padding-top: 25px;
   }

   .wrap {
      width: 100%;
      max-width: 100%;
   }
}

Answer 2

Your problem is in your .navbar .menu element. You need to set the padding-top to 0px unless your screen height is not mobile.

Answer 3

The top gap is because your .menu has big padding-top. The left and right gaps are there because your .wrap has width: 95% (not 100%). So this code will fix both issues:

.navbar {
    width: 105%;
    margin: 0 -2.5%;
}
@media only screen and (min-width: 800px) {
    .navbar {
        width: auto;
        margin: 0;
    }
    .navbar .menu {
        padding-top: 20px;
    }
}