IE9 list spacing issue - css

Question

I have a list of anchor links that display correctly in IE10+, Chrome, etc, but IE9 is adding padding between the elements that shouldn't be there.
This is how it looks in IE10/Chrome:
But IE9 is rendering the links incorrectly:
HTML
<div class="jump-to-links">
<ul class="list-group">
<li>
Link Title<i class="material-icons arrow-down">keyboard_arrow_down</i>
</li>
<li>
Link Title<i class="material-icons arrow-down">keyboard_arrow_down</i>
</li>
<li>
Link Title<i class="material-icons arrow-down">keyboard_arrow_down</i>
</li>
<li>
Link Title<i class="material-icons arrow-down">keyboard_arrow_down</i>
</li>
</ul>
</div>
CSS
// TARGETING EI9+
#media screen and (min-width: 0\0) {
.jump-to-links{
ul{
white-space: nowrap;
}
ul li{
padding: 0;
margin: 0;
}
}
}
.jump-to-links {
text-align: center;
a,a:hover {
text-decoration: none;
color: $black;
font-weight: bold;
display: inline-block;
}
ul li {
display: inline-block;
padding: 0px 60px 0px 0px;
}
li {
cursor: pointer;
}
.arrow-down {
display: block;
}
}
/***************** DESKTOP **************/
#media (min-width: $screen-lg-min) {
.jump-to-links{
a{
font-size: 17px;
}
.arrow-down{
color: $purple;
}
}
}
/***************** TABLET **************/
#media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) {
.jump-to-links{
text-align: left;
ul li{
display: block;
padding: 10px 30px;
border-bottom: 1px solid $accordion-border;
}
.arrow-down{
float: right;
color: $purple;
}
}
}
/****************** MOBILE ***************/
#media (max-width: $screen-xs-max) {
.jump-to-links{
padding: 0px 0px 0px 0px;
text-align: left;
ul li{
display: block;
padding: 10px 30px;
border-bottom: 1px solid $accordion-border;
}
.arrow-down{
float: right;
color: $purple;
}
}
}
Rendered CSS in IE9: