css navbar响应填充问题

Question

我有一个导航栏，每个东西看起来都很棒，直到它响应。底部下拉沿着它一直有5个像差距。

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

我尝试在

上添加和删除填充

.expand {
    max-height: 40em;   
}

Answer 1

您应该移除padding-top上的一些.navbar .menu并将max-width设置为100%

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

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

Answer 2

您的问题出在.navbar .menu元素中。除非屏幕高度不可移动，否则您需要将padding-top设置为0px。

Answer 3

最大差距是因为你的.menu有很大的填充顶部。 左边和右边的间隙是因为你的.wrap有宽度：95％（不是100％）。 因此，此代码将解决这两个问题：

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