如何调整主导航的宽度？

Question

如何调整主导航或整个主导航的bg颜色宽度？我尝试将宽度：40％，但主导航和页脚向右扩展。这是site

我想像this那样制作导航

CSS：

.main-navigation {
clear: both;
display: block;
font-weight: 300;
font-family: 'Arial', 'sans-serif';
font-size: 9px;
position: relative;
border-bottom: 3px solid #787878;
background: #787878;
margin: 0 auto;
text-align: center;
float:right;
}
.main-navigation .ak-container{
padding:0 !important;
}
.main-navigation ul {
list-style: none;
margin: 0 auto;
padding: 0;
    overflow: hidden;
}
.main-navigation li {
display: inline-block;
position: relative;
line-height:48px;
font-size:18px;
text-transform: initial;
color:#ababab;
text-align: center;
white-space: nowrap;
padding-right:0px;
float:right;
} 
.main-navigation.menu-right{
text-align: right;
}
.main-navigation.menu-center{
text-align: center;
}
.main-navigation.menu-right li{
margin-left: 25px;
margin-right:0;
}
.main-navigation.menu-center li{
margin-left: 12px;
margin-right:12px;
}
.main-navigation a {
display: block;
text-decoration: none;
color: #000;
padding: 0 18px;
 }
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
position: absolute;
z-index: 99999;
 background: #FFF;
top: 100%;
border-bottom: 3px solid #4a4a4a;
border-top: 3px solid #4a4a4a;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.main-navigation ul li.more-menu-item > ul{
right:0;
left:auto;
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
border-top:none;
}
.main-navigation ul ul a {
min-width: 150px;
    padding: 0;
}
.main-navigation ul ul li {
font-size: 16px;
line-height: 18px;
border-bottom: 1px solid #DDD;
margin: 0 !important;
padding:10px 15px;
display: block;
text-align: left;
text-transform: none;
}
 .main-navigation ul ul li:last-child{
 border-bottom: none;
}
.main-navigation li:hover > a {
 background: #585858;
 }
 .main-navigation ul ul li:hover > a ,
 .main-navigation ul ul li.current-menu-item > a {
 color: #585858;
 }
 .main-navigation ul ul a{
 color: #666;
 background: none !important;
 }
 .main-navigation ul ul a:hover {
 }
 .main-navigation ul li:hover > ul {
 display: block;
 }
 .main-navigation .current-menu-parent > a,
 .main-navigation .current-menu-item > a,
 .main-navigation .current_page_item > a,
 .main-navigation .current_page_parent > a {
 background: #686868;
  }

Answer 1

需要移除此浮动以便居中。

.main-navigation li{
    float: right;
}

然后你可以使用类似的东西：

<div style="border-left:1px solid #000;height:"100%"></div>

在你的＃menu-beta_menu div里面，让这些竖条发生。

---

延迟更新

OP中的链接现在已经破了，所以我想我会添加一些代码来实现所需的结果，而不依赖于原始的HTML＆amp; CSS

＆＃13;

＆＃13;

nav {
  position: relative;
  float: right;
  display: block;
  height: 100%;
  font-size: 10px;
  background-color: #999;
  padding: 10px;
}
nav a {
  position: relative;
  display: inline-block;
  height: 100%;
  padding: 0 15px;
  color: #333;
  border-right: 1px solid #333;
  text-decoration: none;
}
nav a:last-child {
  border-right: none;
}

＆＃13;

<nav>
  <a href="index.html">
    <p>HOME</p>
  </a><!--
  --><a href="tours-and-hikes.html">
    <p>TOURS & HIKES</p>
  </a><!--	
  --><a href="about.html">
    <p>ABOUT</p>
  </a><!--	
  --><a href="gallery.html">
    <p>GALLERY</p>
  </a><!--
  --><a href="faq.html">
    <p>FAQ's</p>
  </a><!--	
  --><a href="contact.html">
    <p>CONTACT</p>
  </a>
</nav>

＆＃13;

＆＃13;

＆＃13;