div似乎不尊重右边的填充，但尊重左边的填充

Question

我的问题是里面的按钮似乎不尊重父div的填充。我想，如果我到达列表的末尾，右边会有额外的空间，以便滚动不会覆盖按钮。

Left padding

Right Padding

HTML：

<div class="ElementList" id="1">
    <div ng-show="drugLoaded" class="spinner-logo" style="position:absolute;left:50%;top:35%;">
    </div>
    <ul class="list-inline my-radio">
        <li class="ElementItem" ng-repeat="drug in drugDefaults">
            <input type="radio" id="drug{{ $index }}" name="drug" value="{{ drug.medicine.brandName }}" ng-click="runDrug(drug, $event)">
            <label class="" for="drug{{ $index }}">
            {{ drug.medicine.brandName }}
            </label>
        </li>
    </ul>
</div>

CSS：

.ElementList {
    overflow-x:scroll;
    overflow-y:hidden;
    height:80px;
    width:100%;
    padding: 10px 30px;
    background-color: #fff;
    border: 1px solid rgba(204,204,204,0.75);
    margin-top: 0;
}
ul.my-radio{
    list-style-type: none;
}
ul.my-radio label {
    display: inline-block;
    padding-top: 10px;
    height: 50px;
    width: 100px;
    font-weight: 300;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
    vertical-align: bottom;
    white-space:normal;
    color: #999;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(204,204,204,0.75);
    -moz-box-shadow: 0px 5px 0px 0px rgba(204,204,204,0.75);
    box-shadow: 0px 5px rgba(204,204,204,0.75);
}
ul.my-radio label:hover {
    box-shadow: 0 5px rgba(204,204,204,0.75);
    background-color: rgba(0,170,167,0.1);
    /*transform: translateY(2px);*/
}
ul.my-radio label:active {
    box-shadow: 0 3px #999;
    background-color: rgba(0,170,167,1.0);
    transform: translateY(2px);
    color: white;
}
ul.my-radio input[type="radio"],
.my-radio input[type="checkbox"] {
    display:none;
}
ul.my-radio input[type="radio"]:checked + label,
.my-radio input[type="checkbox"]:checked + label{
    background-color: #00aaa7;
    color: white;
}