Chrome: inline-block, padding-right and right click bug - html

Question

I am creating a CSS centered horizontal list for our team's site. It's unfinished, but here is a demo of how it looks so far: http://marbleblastultra.tk/welcomeguest.htm
In Firefox, the list looks how I intend it to look.
In IE, it's not perfect, but it's nothing that I can't fix later on.
However, in Chrome, the longer text is overflowing outside of the
items... until I right click on them...
or until I uncheck float-right in Chrome's inspector, then check it
again.
Such a weird, strange behavior. Right clicking? Why? Google searching reveals nothing. Searching this forum reveals nothing about the phenomenon either.
I am using Chrome 40 for Windows, but it might happen on different versions too.
What makes this list so complicated and unique is each item's background image. I want the text for each item to be centered both vertically and horizontally inside the background image. Easy enough, but the background images have transparent corners, and I need to use padding to push the text into the middle.
The above image shows how each item should look in the centered horizontal list, with the text centered within the blue area, never on top of the transparent corners (highlighted in green).
The above image, however, shows what I see instead in Chrome right now. The text incorrectly overflows outside of the box. Here is a cleaned up code sample from the test page.
CSS:
ul.welcomeguest li {
min-width:150px;
min-height:50px;
vertical-align:middle;
line-height:50px;
white-space:nowrap;
display:inline-block;
background:url(images/button_d.png) no-repeat center;
background-size:100% 100%;
}
ul.welcomeguest li div {
display:inline-block;
padding-left:10%;
padding-right:10%;
}
HTML:
<div style="width:100%" align="center">
<ul class="welcomeguest">
<li><div>Homepage</div></li><!--
--><li><div>Login/Register</div></li><!--
--><li><div>Download Game</div></li><!--
--><li><div>Download Levels</div></li><!--
--><li><div>View Leaderboards</div></li><!--
--><li><div>Info/Tutorials</div></li><!--
--><li><div>Contact Locations/About</div></li>
</ul>
</div>
How may I reliably add padding-right to a display:inline-block'd element in Chrome, if at all?
JSFiddle? http://jsfiddle.net/mh70zn34/3/

Answer 1

ul.welcomeguest li:last-child{
min-width: inherit;
}

Answer 2

I'm sorry :D, Please check it
HMLT : you need remove tag div in
<div style="width:100%" align="center">
<ul class="welcomeguest">
<li>Homepage</li>
<li>Login/Register</li>
<li>Download Game</li>
<li>Download Levels</li>
<li>View Leaderboards</li>
<li>Info/Tutorials </li>
<li>Contact Locations/About</li>
</ul>
</div>
and css:
body {
background-color:#EEEEEE;
}
ul.welcomeguest li a {
min-width:150px;
min-height:50px;
vertical-align:middle;
line-height:50px;
white-space:nowrap;
float:left;
background:url(http://marbleblastultra.tk/images/button_d.png) no-repeat center;
background-size:100% 100%;
padding:0 20px;
}
.welcomeguest li {
display: inline-block;
list-style: outside none none;
overflow:hidden;
}
http://jsfiddle.net/mh70zn34/11/
Note: Can't use padding with percent value in your layout.