Remove this custom CSS you already used:
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
Replace that with this custom CSS:
@media (min-width: 768px) {
.searchandfilter[data-sf-form-id="36"] .sf-field-reset:before {
content: "";
display: block;
height: 12px;
}
.searchandfilter[data-sf-form-id="36"] > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px 0 0;
}
.searchandfilter[data-sf-form-id="36"] > ul > li:last-child {
padding: 0;
}
}
@media (max-width: 768px) {
.searchandfilter[data-sf-form-id="36"] li {
text-align: center;
}
.searchandfilter[data-sf-form-id="36"] > ul > li {
padding: 0;
}
.searchandfilter[data-sf-form-id="36"] .sf-field-reset {
padding-top: 11px;
}
}
You may need to adjust the numbers slightly to meet your needs.