How to center align text over CSS shape?

[deeefuzz]

For navigation, I opted to use CSS shapes rather than images with overlaid text. However, in every browser, the text appears misaligned towards the right.Preview on jsFiddleHTML code:\[code\]<nav id="globalNav"> <ul> <li> <div class="stars"></div> <a id="navHome">home</a> </li> <li> <div class="stars"></div> <a id="navWork">work</a> </li> <li> <div class="stars"></div> <a id="navAbout">about</a> </li> </ul></nav>\[/code\]CSS code:\[code\]#globalNav { position: fixed; z-index: 1; width: 100%; height: 100px; top: 0; left: 0; overflow: hidden; background-color: #1b2326; color: #2A363B;} #globalNav ul { margin: 1.25em auto; padding: 0; position: relative; -webkit-padding-start: 0; -moz-padding-start: 0; text-align: center; } #globalNav li { padding: 0 3.5em; display: inline-block; } #globalNav a { position: absolute; top: 1.3em; padding: 0 0.25em; -moz-padding-start: 0; font-size: 1em; text-transform: uppercase; color: #FECEA8; } #globalNav a:hover { position: absolute; top: 1.3em; padding: 0 0.25em; -moz-padding-start: 0; font-size: 1em; text-transform: uppercase; color: #ED6161; -webkit-transition: .3s ease-in; -moz-transition: .3s ease-in; -ms-transition: .3s ease-in; -o-transition: .3s ease-in; transition: .3s ease-in; }/* dodecagram stars */.stars { background: #2A363B; width: 60px; height: 60px; position: relative;} .stars:before, .stars:after { content: ""; position: absolute; top: 0; left: 0; height: 60px; width: 60px; background: #2A363B; } .stars:before { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); } .stars:after { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); }\[/code\]I already searched the forum (i.e., Center text with background CSS