Centering my Navigation buttons in CSS...

Hey,

I've been playing around with floats in the Workspace. Anyway, I know it's not good practice, but I'm making my bigger site first then I'm using a media query for the mobile site.

Anyway, the site over 768px looks good, but I'm having trouble with the navigation buttons inside the header on the mobile site. Specifically, I'm trying to get the buttons centered but there is always space on the left hand side, and I can't seem to get it to work, so I thought I'd ask for help.

The big page uses floats and the mobile site doesn't. The buttons are inside the header, like in the examples used in CSS Layout Techniques. Here is the code I used outside the media query…

/*******************
HEADER
*******************/
.main-header{
  background:rgba(100, 200, 255, 1);

}


/*******************
BUTTONS
*******************/

.main-nav li{
  background:rgba(100, 200, 100, 1);
  width:100px;
  float:left;
  text-align:center;
  list-style-type:none;
  padding:10px;
  border-radius:5px;

  margin-right:10px;
  margin-top:10px;
  border:1px solid black;

}

and here is the code inside the media query…

@media screen and (max-width:768px){

  .main-logo{
    float:none;
    width:100%;
    height:100%;
    box-sizing:border-box;
    border-radius:0;

  }

  .main-nav li{
    float:none;
    width:100%;
    margin-right:0;
    margin-left:0;
    box-sizing:border-box;

  }

If anyone can help, I would greatly appreciate it. Thanks.