Html 页脚项目和右箭头图标之间的空格问题

我有一个页脚时间表。有多个项目，左箭头和右箭头可滚动至左侧/右侧。在测试响应性时，如果屏幕宽度>1067 px，则根据应用程序的性质，左/右箭头将不可见

但是，如果屏幕宽度<1067px且>768px，则页脚容器的最后一项和右箭头图标之间的空间比预期的大

问题是：

为此，我根据屏幕分辨率设置了媒体查询

Css

    // bigger screen no arrows
        @media screen and (max-width: 1224px) {
      .footerContainer {
        .footer_outer_wrapper {
          .arrows {
            display: none;
          }
          .footer_inner_wrapper {
            height: 100%;
            .footer {
              .item {
                width: rem(75);
              }
            }
          }
        }
      }
    }

   // ipad type screen having problem in right arrow
    @media screen and (min-width: 768px) and(max-width: 1062px) {
      .footerContainer {
        .footer_outer_wrapper {
          .arrows {
            display: block;
            .right-arrow {
              transform: translate(10%, -50%);
            }
          }
          .footer_inner_wrapper {
            margin-left: 36px;
            margin-right: 36px;
            width: rem(475) !important;
            height: 100%;
            overflow: hidden;
          }
        }
      }
    }

如何解决右箭头和页脚项目之间的空格问题？

尝试使用“显示：内联块”而不是“显示：块”。

我必须将“显示：内联块”放在子类（.right arrow）中。。。否则它就不起作用了。。。