Space before left tab - css

Question

I have been stuck on a problem here. This is what I designed my app in html and css. The problem is indicated with red circle in lower left corner i.e. the space before the left tab. I am unable to remove this space. This is neither padding nor margin but I don't know what it is.
The code for tab is:
html
<ul id="bottomTabs">
<li>Player</li>
<li>Reciters</li>
</ul>
css
ul {
margin: 0 ;
bottom: 0 ;
left: 0 ;
padding: 0;
}
li {
list-style-type: none;
bottom: 0 ;
left: 0 ;
margin-left:1em ;
}
#bottomTabs {
width: 100%;
bottom: 0px;
display: table;
position: fixed;
table-layout: fixed;
text-align: center;
}
#bottomTabs li {
width: 47.5%;
height: auto;
align : center;
display: table-cell;
padding-left: 1.5%;
vertical-align: bottom;
}
#bottomTabs a {
display: block;
color: #ffffff;
min-height: 100%;
padding: 4px 10px;
background-color: #222;
border-radius: 0 0 0 0;
}

Answer 1

You have padding-left: 1.5% on both of your li elements. You only need it for the second one. You can create a new class/id just for the second list item. Have your HTML as:
<ul id="bottomTabs">
<li>Player</li>
<li id="padded">Reciters</li>
</ul>
And CSS:
#bottomTabs li {
width: 47.5%;
height: auto;
align : center;
display: table-cell;
vertical-align: bottom;
}
#padded{
padding-left: 1.5%;
}
DEMO: http://jsfiddle.net/cuzZC/1/

Answer 2

Give a class for the first li and give padding 0..
.padd
{
padding:0 !important;
}
<ul id="bottomTabs">
<li class="padd" >Player</li>
<li>Reciters</li>
</ul>

Answer 3

try this one,
#bottomTabs li:first-child {
width: 47.5%;
height: auto;
align : center;
display: table-cell;
padding-left: 0;
vertical-align: bottom;
}
http://jsfiddle.net/K9jq7/

Answer 4

padding-left: 1.5% is causing this effect.
The first li doesn't need any padding, just add
#bottomTabs li:first-child {
padding-left: 0;
}
or you could remove the padding-left from #bottomTabs li and add
#bottomTabs li:last-child {
padding-left: 1.5%;
}
I would suggest using the first-child pseudo class since it's better supported.
http://www.quirksmode.org/css/selectors/