How to adjust the width of main nav? - layout

Question

How to adjust the width of bg color of main navigation or the whole main navigation? I try to put width:40% but the main nav and footer expanding to the right. Here's the site
I want to make the nav like 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

This float needs to be removed in order to center.
.main-navigation li{
float: right;
}
and then you could use something kind of like:
<div style="border-left:1px solid #000;height:"100%"></div>
inside you #menu-beta_menu div to get those vertical bars happening.
Late Update
The link in the OP is now broken, so I thought I would just add some code to achieve the desired outcome that does not rely on the original HTML & CSS
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;
}
<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>