Unable to edit padding-right with css inside html head - SOLVED

Exporting & Previewing
1

Hello! I’m currently trying to change the layout of the scrollbars that you can enable within the element inspector.
It works fine to change the color and width, but as soon as I want to change the placement of the scrollbar and move it slightly away from the text (since it’s really close and looks fugly), nothing happens.

The text elements’ unique ID is textHolder and the class name is rl_shell
The padding-right doesn’t do anything as well as any of the settings for the class (overflow:auto etc.)

Here is the code copied from the html head:

<style>
.rl_shell {
    overflow: auto;
    background gray ;
    max-height: 500px;
    width: 450px;
    padding-right: 40px;
}

::-webkit-scrollbar{
    width: 10px;
    height: 20px;
    padding-top: 40px;
}

::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border: 1px solid black;
    background: rgb(41,41,41);
    border-radius: 10px;

}
::-webkit-scrollbar-thumb{
    border-radius:10px;
    height: 30px;
    width: 8px;
    border: 1px solid black;
    background: rgb(111,111,111);
    -webkit-box-shadow: 0 1px 1px rgb(0,0,0);
    background: -webkit-linear-gradient(rgb(200,200,200), rgb(150,150,150));
}

::-webkit-scrollbar-track-piece {
    height: 30px;
    width: 30px;
}
</style>
2

Actually, max-width and max-height seems to work properly. However, the padding-right is not doing anything and that is the one that I need to change in order to move the scrollbar.

3

Solved it! Used !important after the code. I even replaced the padding-right so I could change the padding from all sides instead, here is the new line:

padding: 0px 15px 0px 0px !important;