Vous avez besoin d'une bordure pour étirer toute la barre de menus et pas seulement les éléments du menu

Question

Si vous consultez twoguysplayingzelda.com, vous remarquerez que j'ai une bordure supérieure et inférieure dans mon menu qui ne s'étend que jusqu'au dernier élément de menu. Je voudrais que cette bordure ne s'étende pas toute la page, mais du côté gauche de la fenêtre de gauche au côté droit de la barre latérale. Si cela est déroutant, il suffit de regarder comment les choses sont alignées sur le côté gauche et le côté droit et j'espère que cela aura du sens. Mon code CSS est ci-dessous. Merci pour votre aide!

div.navigation.section.no-padding.bg-dark { background: #ffffff; }  

.main-menu {   
font-family: 'Arial', sans-serif; 
font-size: 1.0em; 
text-align: center; 
}  

.main-menu li { position: relative; }  

.main-menu > li { float: left; }   

.main-menu > li:before {   
content: none; 
display: block; 
position: absolute; 
right: 0; 
top: 50%; 
margin-top: -18px; 
margin-right: -13px;  
}  

.main-menu > li:last-child:before { content: none; }   

.main-menu > li > a {  
display: block; 
padding-top: 12px; 
padding-bottom: 12px; 
padding-left: 12px; 
padding-right: 12px;  
font-size: 1.0em; 
color: #000000; 
text-transform: uppercase; 
letter-spacing: 1px;  
font-weight: 400; 
border-bottom: 1px solid #808080; (here is my bottom border) 
border-top: 1px solid #808080; (here is my top border) 
width: 100%; (I thought this would do the trick but it didn't) 
}  

.main-menu > li:first-child > a { margin-left: 0; }  

.main-menu > .has-children > a,  
.main-menu > .page_item_has_children > a { padding-right: 20px; position: 
relative; }  

.main-menu > .has-children > a::after,  
.main-menu > .page_item_has_children > a::after {  
content: "";  
display: none; 
border: 5px solid transparent; 
border-top-color: #999; 
position: absolute; 
z-index: 1001; 
right: 29px;  
top: 50%; 
margin-top: -2px; 
}  

.main-menu li:hover > a { 
cursor: pointer; 
background: #01B3D9; 
color: #000000; }  

.main-menu > .has-children:hover > a::after,   
.main-menu > .page_item_has_children:hover > a::after { border-top-color: 
#fff; } 

Answer 1

La frontière est sur vos éléments .main-menu > li > a, vous devrez supprimer ce.

Puis ajoutez la bordure à l'élément contenant, qui est votre div.navigation-inner.section-inner, mais vous devez ajouter une autre classe pour ajouter les styles de bordure à cela, car vous utilisez navigation-inner section-inner dans plus d'un endroit.