How to shrinkwrap and center elements horizontally http://www.456bereastreet.com/archive/201303/how_to_shrinkwrap_and_center_elements_horizontally/

index.html

<div>
  <ul>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Aliquam</a></li>
    <li><a href="#">Vestibulum</a></li>
  </ul>  
</div>

style.css

* {
  margin:0px;
  padding:0px;
}
div {
  text-align:center;
}

ul {
  display: inline-block;
  list-style:none;
  background-color:orange;
  margin:20px;
  padding:20px;
  border-radius:12px;
}

li {
  float:left;
  margin:0px;
}

li + li {
  margin-left:20px;
}

a {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  color:white;
  display:block;
  text-decoration:none;
  padding:10px 15px;
  background-color:grey;
  border-radius:12px;
}

a:hover {
  color:black;
  background-color:red;
  border-radius:6px;
}