How to center my hmenu (no matter the resolution)?

I'm having an issue trying to figure out how to center the hmenu appropriately. I've searched around, but the css is pretty advanced. I want the menu bar full screen like it is now, but the menu options need to be centered (no matter the screen resolution).
www.sleepstudymo.com
Here is the code (sorry it's long, but I didn't know what part to copy):
.sleep-nav
{
   background: #00628F;
   background: -webkit-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat;
   background: -moz-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat;
   background: -o-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat;
   background: -ms-linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat;
   -svg-background: linear-gradient(top, #003B57 0, #0088C7 100%) no-repeat;
   background: linear-gradient(to bottom, #003B57 0, #0088C7 100%) no-repeat;
   -webkit-border-radius:5px 5px 0 0;
   -moz-border-radius:5px 5px 0 0;
   border-radius:5px 5px 0 0;
   border-bottom:1px solid #6BD0FF;
   padding:12px 2px 0;
   margin:20px auto 0;
   position: relative;
   z-index: 499;
   text-align: left;
}

ul.sleep-hmenu a, ul.sleep-hmenu a:link, ul.sleep-hmenu a:visited, ul.sleep-hmenu a:hover 
{
   outline: none;
   position: relative;
   z-index: 11;
}

ul.sleep-hmenu, ul.sleep-hmenu ul
{
   display: block;
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
}

ul.sleep-hmenu li
{
   position: relative;
   z-index: 5;
   display: block;
   float: left;
   background: none;
   margin: 0;
   padding: 0;
   border: 0;
}

ul.sleep-hmenu li:hover
{
   z-index: 10000;
   white-space: normal;
}

ul.sleep-hmenu:after, ul.sleep-hmenu ul:after
{
   content: ".";
   height: 0;
   display: block;
   visibility: hidden;
   overflow: hidden;
   clear: both;
}

ul.sleep-hmenu, ul.sleep-hmenu ul 
{
   min-height: 0;
}

ul.sleep-hmenu 
{
   display: inline-block;
   vertical-align: bottom;
   padding-left: 5px;
   padding-right: 5px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}


.sleep-nav:before 
{
   content:' ';
}

.desktop .sleep-nav{
   width: 100%;
   padding-left: 2px;
   padding-right: 2px;

}

.sleep-hmenu-extra1
{
   position: relative;
   display: block;
   float: left;
   width: auto;
   height: auto;
   background-position: center;
}

.sleep-hmenu-extra2
{
   position: relative;
   display: block;
   float: right;
   width: auto;
   height: auto;
   background-position: center;
}

.sleep-hmenu
{
   float: left;
}

.sleep-menuitemcontainer
{
   margin:0 auto;
}
ul.sleep-hmenu>li {
   margin-left: 9px;
}
ul.sleep-hmenu>li:first-child {
   margin-left: 4px;
}
ul.sleep-hmenu>li:last-child, ul.sleep-hmenu>li.last-child {
   margin-right: 4px;
}

ul.sleep-hmenu>li>a
{
   -webkit-border-radius:12px 12px 0 0;
   -moz-border-radius:12px 12px 0 0;
   border-radius:12px 12px 0 0;
   border:1px solid transparent;
   border-bottom:none;
   padding:0 21px;
   margin:0 auto;
   position: relative;
   display: block;
   height: 31px;
   cursor: pointer;
   text-decoration: none;
   color: #FFFFFF;
   line-height: 31px;
   text-align: center;
}

.sleep-hmenu>li>a, 
.sleep-hmenu>li>a:link, 
.sleep-hmenu>li>a:visited, 
.sleep-hmenu>li>a.active, 
.sleep-hmenu>li>a:hover
{
   font-size: 18px;
   font-family: 'Open Sans Condensed', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   text-align: left;
   text-shadow: 1.4px 1.4px 0 rgba(23, 23, 23, 0.82);
}

ul.sleep-hmenu>li>a.active
{
   background: #6BD0FF;
   background: -webkit-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -moz-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -o-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -ms-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   -svg-background: linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: linear-gradient(to bottom, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   -webkit-border-radius:12px 12px 0 0;
   -moz-border-radius:12px 12px 0 0;
   border-radius:12px 12px 0 0;
   border:1px solid #6BD0FF;
   border-bottom:none;
   padding:0 21px;
   margin:0 auto;
   color: #FFFFFF;
   padding-bottom: 1px;
   margin-bottom: -1px;
   text-decoration: none;
}

ul.sleep-hmenu>li>a:visited, 
ul.sleep-hmenu>li>a:hover, 
ul.sleep-hmenu>li:hover>a {
   text-decoration: none;
}

ul.sleep-hmenu>li>a:hover, .desktop ul.sleep-hmenu>li:hover>a
{
   background: #6BD0FF;
   background: -webkit-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -moz-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -o-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: -ms-linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   -svg-background: linear-gradient(top, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   background: linear-gradient(to bottom, #8FDBFF 0, #8ADAFF 10%, #7AD5FF 20%, #6BD0FF 20%, #57CAFF 50%, #42C3FF 100%) no-repeat;
   -webkit-border-radius:12px 12px 0 0;
   -moz-border-radius:12px 12px 0 0;
   border-radius:12px 12px 0 0;
   border:1px solid #A6A6A6;
   border-bottom:none;
   padding:0 21px;
   margin:0 auto;
}
ul.sleep-hmenu>li>a:hover, 
.desktop ul.sleep-hmenu>li:hover>a {
   color: #FFFFFF;
   text-decoration: none;
}
ul.sleep-hmenu>li>a.active:hover {
   padding-bottom: 0;
   margin-bottom: 0;
}

ul.sleep-hmenu>li:before
{
   position:absolute;
   display: block;
   content:' ';
   top:0;
   left:  -9px;
   width:9px;
   height: 31px;
   background: url('images/menuseparator.png') center center no-repeat;
}
ul.sleep-hmenu>li:first-child:before{
   display:none;
}

ul.sleep-hmenu li li a
{
   background: #80D7FF;
   background: transparent;
   -webkit-border-radius:13px;
   -moz-border-radius:13px;
   border-radius:13px;
   padding:0 8px;
   margin:0 auto;
}
ul.sleep-hmenu li li 
{
   float: none;
   width: auto;
   margin-top: 0;
   margin-bottom: 0;
}

.desktop ul.sleep-hmenu li li ul>li:first-child 
{
   margin-top: 0;
}

ul.sleep-hmenu li li ul>li:last-child 
{
   margin-bottom: 0;
}

.sleep-hmenu ul a
{
   display: block;
   white-space: nowrap;
   height: 29px;
   min-width: 7em;
   border: 0 solid transparent;
   text-align: left;
   line-height: 29px;
   color: #00ABFA;
   font-size: 16px;
   font-family: 'Open Sans Condensed', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-decoration: none;
   margin:0;
}

.sleep-hmenu ul a:link, 
.sleep-hmenu ul a:visited, 
.sleep-hmenu ul a.active, 
.sleep-hmenu ul a:hover
{
   text-align: left;
   line-height: 29px;
   color: #00ABFA;
   font-size: 16px;
   font-family: 'Open Sans Condensed', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-decoration: none;
   margin:0;
}

ul.sleep-hmenu ul li a:hover, .desktop ul.sleep-hmenu ul li:hover>a
{
   background: #FFFFFF;
   -webkit-border-radius:13px;
   -moz-border-radius:13px;
   border-radius:13px;
   margin:0 auto;
}
.sleep-hmenu ul a:hover
{
   text-decoration: none;
   color: #7A7A7A;
}

.desktop .sleep-hmenu ul li:hover>a
{
   color: #7A7A7A;
}

ul.sleep-hmenu ul:before
{
   background: #E5F7FF;
   -webkit-border-radius:13px;
   -moz-border-radius:13px;
   border-radius:13px;
   border:1px solid #B3E7FF;
   margin:0 auto;
   display: block;
   position: absolute;
   content: ' ';
   z-index: 1;
}
.desktop ul.sleep-hmenu li:hover>ul {
   visibility: visible;
   top: 100%;
}
.desktop ul.sleep-hmenu li li:hover>ul {
   top: 0;
   left: 100%;
}

ul.sleep-hmenu ul
{
   visibility: hidden;
   position: absolute;
   z-index: 10;
   left: 0;
   top: 0;
   background-image: url('images/spacer.gif');
}

.desktop ul.sleep-hmenu>li>ul
{
   padding: 12px 32px 32px 32px;
   margin: -10px 0 0 -30px;
}

.desktop ul.sleep-hmenu ul ul
{
   padding: 32px 32px 32px 14px;
   margin: -32px 0 0 -9px;
}

.desktop ul.sleep-hmenu ul.sleep-hmenu-left-to-right 
{
   right: auto;
   left: 0;
   margin: -10px 0 0 -30px;
}

.desktop ul.sleep-hmenu ul.sleep-hmenu-right-to-left 
{
   left: auto;
   right: 0;
   margin: -10px -30px 0 0;
}

.desktop ul.sleep-hmenu li li:hover>ul.sleep-hmenu-left-to-right {
   right: auto;
   left: 100%;
}
.desktop ul.sleep-hmenu li li:hover>ul.sleep-hmenu-right-to-left {
   left: auto;
   right: 100%;
}

.desktop ul.sleep-hmenu ul ul.sleep-hmenu-left-to-right
{
   right: auto;
   left: 0;
   padding: 32px 32px 32px 14px;
   margin: -32px 0 0 -9px;
}

.desktop ul.sleep-hmenu ul ul.sleep-hmenu-right-to-left
{
   left: auto;
   right: 0;
   padding: 32px 14px 32px 32px;
   margin: -32px -9px 0 0;
}

.desktop ul.sleep-hmenu li ul>li:first-child {
   margin-top: 0;
}
.desktop ul.sleep-hmenu li ul>li:last-child {
   margin-bottom: 0;
}

.desktop ul.sleep-hmenu ul ul:before
{
   border-radius: 13px;
   top: 30px;
   bottom: 30px;
   right: 30px;
   left: 12px;
}

.desktop ul.sleep-hmenu>li>ul:before
{
   top: 10px;
   right: 30px;
   bottom: 30px;
   left: 30px;
}

.desktop ul.sleep-hmenu>li>ul.sleep-hmenu-left-to-right:before {
   right: 30px;
   left: 30px;
}
.desktop ul.sleep-hmenu>li>ul.sleep-hmenu-right-to-left:before {
   right: 30px;
   left: 30px;
}
.desktop ul.sleep-hmenu ul ul.sleep-hmenu-left-to-right:before {
   right: 30px;
   left: 12px;
}
.desktop ul.sleep-hmenu ul ul.sleep-hmenu-right-to-left:before {
   right: 12px;
   left: 30px;
}
Solution
For .sleep-nav set text-align: center - your menu is inline-block element so it will be centered just like text and second thing you need to remove float: left for ul.sleep-hmenu or set it to none.