Unable to Horizontal Scroll Product category (Custom CSS)

Question

I've implemented a css on my Wooocommerce Store in Shop page:- Website link - https://grocery.mrshubhu.com/shop .

After opening this Page please inspect it into mobile device.

You'll see a category scroll on the left side. (https://prnt.sc/26qycn4).

I've implemented this using custom css. I've a little bit knowledge of it. You may check that it's unable to scroll the whole category in horizontal. It limits to the screen. Will anybody help me. Which css code can I apply to it?

Css Used -

.archive .page-title {
    background-image: none !important;
    width: 22% !important;
    background-color: #fff;
    box-shadow: 2px 0 6px rgb(110 78 78 / 5%);
    border-right: 1px solid rgba(40,44,63,.05);
    z-index: 1;
    transform: translate3d(0,0,0);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    overflow: scroll;
    display: -webkit-box;
    position: fixed !important;
}