Go to what you had at first post and change float: left; to display: inline-block; and then adding text-align: center; to ul will make list items centered.
float: left makes all elements pulled to the left.
display: inline-block makes elements able to display one after another and you can still set width and height, if it would be just inline, you would need to set padding to enlarge element. text-align affects only inline elements (including inline-block)
But, you can use just one div and links inside it to create exactly same effect, example: https://jsfiddle.net/w34uurra/