Html 固定元件问题-can'；不要让它滚动

HTML:

<div id="tmenu" style="direction:rtl;">
  <img src="assets/imgs/menu/all.jpg"/>
  <img src="assets/imgs/menu/sweets.jpg"/>
  <img src="assets/imgs/menu/main meals.jpg"/>
  <img src="assets/imgs/menu/ma5bozat.jpg"/>
  <img src="assets/imgs/menu/moqblat.jpg"/>
  <img src="assets/imgs/menu/mofrznat.jpg"/>
  <img src="assets/imgs/menu/carnavals.jpg"/>
  <img src="assets/imgs/menu/other.jpg"/>
</div>

#tmenu
{
    width: max-content;
    overflow-x: scroll!important;
    img
    {
        display: inline-block;
        width: 100px!important;
        height: 100px!important;
    }
}

如何使其可滚动？

#t菜单
{
宽度：最大含量；
溢出-x：滚动！重要；
高度：100px；
溢出y：隐藏；
空白：nowrap；
浮动：左；
宽度：400px；
字号：0
}
img
{
显示：内联块；
宽度：100px！重要；
高度：100px！重要；
垂直对齐：中间对齐；
}

另一个问题-您知道为什么图像之间存在空白吗？-我使用了chrome开发者工具，并且没有填充或空白images@AboMohsen编辑了我的答案