html5 li class,为li标签添加class并修改CSS样式，为什么会无效？

HTML写了一个普通的列表

美术部

艺术部

高考部

春考部

数控部

电信部

财经部

专业介绍

因为最后一个按钮多一个字的原因，要修改使最后一个按钮的padding有别于其他的padding，我的解决方法是给他们分别添加不同的class(请问有什么其他更好的解决方法吗？)，3字的是.3t，4字的是.4t。

.major {

padding-top: 30px;

}

.buttons {

height: 350px;

padding-top: 20px;

/*display: flex;

flex-direction: column;

align-items: center;

justify-content: center;*/

}

.buttonsss {

/*display: flex;

flex-direction: row;

align-items: center;

justify-content: center;*/

margin-left: auto;

margin-right: auto;

}

.buttonsss li {

background-color: transparent;

border: 1px #939393 solid;

border-radius: 4px;

font-size: 20px;

color: #939393;

width: 150px;

height: 146px;

line-height: 40px;

text-align: center;

list-style-type: none;

text-decoration: none;

cursor: pointer;

margin-right: 30px;

display: inline;

}

.buttonsss a:link {

text-decoration: none;

border-bottom-width: 0;

}

.buttonsss li:hover {

color: #a8d970;

cursor: pointer;

border: 1px #a8d970 solid;

}

.container p {

padding-bottom: 70px;

}

.4t {

padding: 10px 10px;

}

.3t {

padding: 10px 20px;

}

但是....无效...没有padding效果

如果padding写在.buttonsss li里就没问题

请问是为什么？