How to center my Nav Bar?

I have had many attempts but I have failed on all attempts, This is my code I've created but I cannot find a way to center my navigation bar. Here is my code

<div id="nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Models</a>
<ul>
  <li><a href="#">Lite</a></li>
  <li><a href="#">Domestic</a></li>
  <li><a href="#">Regional</a></li>
  <li><a href="#">Continental</a></li>
  <li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Technical</a></li>
<li><a href="#">Other Products</a>
<ul>
  <li><a href="#">EMA Loader</a></li>
  <li><a href="#">Portable Airstairs</a></li>
</ul>
</li>

<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ's</a></li>
</ul>
</nav>
</div>
<style type="text/css">
#primary_nav_wrap {
 margin-top: 15px;

}

#primary_nav_wrap ul {
list-style: none;
 position: relative;
padding: 0
}

 #primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
 }

#primary_nav_wrap ul li {
position: relative;
float: left;
margin-right: auto;
margin-left: auto;
padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
 background: #ddd
}

#primary_nav_wrap ul li:hover {
background: #75D1FF;
}

#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}

#primary_nav_wrap ul ul li {
float: none;
width: 200px
}

#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}



</style>

Please try and help me as the website I'm making requires the nav bar to be in the center

Solution

Please find the updated code, it works well for me, hope it will resolve your issue.

<div id="nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Models</a>
<ul>
  <li><a href="#">Lite</a></li>
  <li><a href="#">Domestic</a></li>
  <li><a href="#">Regional</a></li>
  <li><a href="#">Continental</a></li>
  <li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Technical</a></li>
<li><a href="#">Other Products</a>
<ul>
  <li><a href="#">EMA Loader</a></li>
  <li><a href="#">Portable Airstairs</a></li>
</ul>
</li>

<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ's</a></li>
</ul>
</nav>
</div>
<style type="text/css">
#primary_nav_wrap {
 margin-top: 15px;
 text-align:center;

}

#primary_nav_wrap ul {
list-style: none;
 position: relative;
padding: 0;
margin:0px auto;
display:inline-block;
}

 #primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
 }

#primary_nav_wrap ul li {
position: relative;
float: left;
margin-right: auto;
margin-left: auto;
padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
 background: #ddd
}

#primary_nav_wrap ul li:hover {
background: #75D1FF;
}

#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}

#primary_nav_wrap ul ul li {
float: none;
width: 200px
}

#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}

</style>