将div的代码添加到CSS时，导航栏被破坏

Question

好吧，我有一个包含这段代码的完美菜单，就在我的css文件中使用此代码

ul.Menu {
list-style-type: none;
margin: 10px;
overflow: hidden;
background-color: #ffffff;
border-style: solid;
border-color: #e9055c;
border-width: 2px;
font-weight: bold;
font-family: arial, sans-serif;
text-align: center;
margin: 0 auto;
}

ul.Menu li{
    border-right: 1px solid #e9055c;
    display: inline-block;
}

ul.Menu li a {
    display:block;
    color: #e9055c;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.Menu li a:hover {
    background-color: #f6b0ce;
}

ul.Menu li:last-child {
    border-right: none;
}

然后我将其添加到我的CSS代码中，通过我网站顶部的div创建响应式横幅：

.wrapper {
width: 100%;
overflow: hidden; 
}

.container {
    width: 100%;
    margin: 0 auto;
}

.banner-img {
    width: 100%;
}

现在我的菜单看起来像这样 - 在菜单项上面有太多空间，非常糟糕......

我已经发现，当我更改ul.Menu li a上的填充设置时，它会发生变化，但我无法正确处理这些设置...... 你能帮我么？ ：）

Answer 1

您已经两次写了margin属性。从margin : 0px删除ul.Menu样式，导致问题。