容器Div覆盖移动导航（不够伸展）

Question

我正在使用我正在处理的网站的移动版本遇到问题。我将以下CSS添加到导航菜单中，以使所有列表项全宽并在导航栏的长度上延伸（对于桌面用户）。

.menu {
width:100%;
border:0px solid black;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

.menu ul {
margin: 0;
padding: 0;
}

.menu li {
list-style: none;
text-align: center;
width: 14.285%; /* fallback for non-calc() browsers */
width: calc(100% / 7);
box-sizing: border-box;
}

/*
@media only screen {
.menu li {
 width:100%;
 width: calc(100%/1);
}
}
*/

.main-nav { 
border: 0px solid black;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}


.menu li.menu-item-128 {
border:0px solid black;
border-bottom-left-radius:8px; 
border-collapse:collapse; 
}

.menu li.menu-item-128 a {
border:0px solid black;
border-bottom-left-radius:8px;  
border-collapse:collapse;
}



.menu li.menu-item-642 {
border:0px solid black;
border-top-right-radius:0px;
border-bottom-right-radius:8px; 

}

.menu li.menu-item-642 a {
border:0px solid black;
border-top-right-radius:0px;
border-bottom-right-radius:8px;  
}

.menu li规则导致了这个问题（http://s22.postimg.org/watzsv0wx/mobile_Nav.jpg）

我希望它看起来像这样 （http://s8.postimg.org/x0brxplhx/mobile_Nav2.jpg）

但是，我设法让移动导航菜单看起来正常的唯一方法是通过注释掉.menu li规则，这可以防止列表项在桌面视图中正确拉伸。 “@media only screen”是我尝试解决问题的方法，但它并没有真正解决问题。