Fix Floating Elements

So I am testing something to center elements in a UL. However, if I try to push one end using

Code:

---

left:50%; transform:translateX(-50%);

---

and squeeze the page it seems to not want to stay all on one line.

Here is an example:
http://thebcelements.com/GCG/

To center li elements, declare text-align:center; on the ul, and set the li elements as display:inline-block; instead http://jsbin.com/yageduruqu/edit?html,css,output

There is a gap around inline-block elements though so, to counteract it, you can bunch up the markup so that the li tags sit together on one line, or comment out the new-line between them (demo does the latter)