html - css navbar 响应式填充问题

Question

我有一个导航栏，在它响应之前，一切看起来都很棒。底部下拉菜单四周有 5 像素的间隙。

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

我试过添加和删除填充

.expand {
    max-height: 40em;   
}

Answer 1

顶部差距是因为您的 .menu 有很大的 padding-top。左右间隙存在是因为您的 .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;
    }
}