scribe footer arrow alignment issue

.single-post h2, h3 {
margin-bottom: 20px;
font-weight: 600;
padding: 10px 10px 10px 10px;
border-left: 7px solid #745acc;
background-color: #F6F9FE;
border-radius: 2px;
color: #232323 !important;
box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
display: inline-block;

This code is causing the footer purpe arrow to shift from right to left and weird white background appears. screenshot below
https://prnt.sc/fpY_L8IgSeil

If I remove the css code, then the arrow shifts to the right as is the case in scribe.

Please help.