Javascript 反应水平滚动菜单占用从左箭头到项目1的额外空间

我正在使用反应水平滚动菜单库，下面是UI

在图像中，您可以看到item1的左箭头中有额外的空间。如何删除这个额外的空间。这是供您参考的虚拟UI，但我在我的live项目中遇到了相同的问题，客户希望删除此额外空间。请帮忙

我的AppList.js

import React, { Component } from 'react';
import ScrollMenu from 'react-horizontal-scrolling-menu';

const list = [
  { name: 'item01' },
  { name: 'item2' },
  { name: 'item3' },
  { name: 'item4' },
  { name: 'item5' },
  { name: 'item6' },
  { name: 'item7' },
  { name: 'item8' },
  { name: 'item9' }
  
];

// One item component
// selected prop will be passed
const MenuItem = ({text, selected}) => {
  return <div
    className={`menu-item ${selected ? 'active' : ''}`}
    >{text}</div>;
};

// All items component
// Important! add unique key
export const Menu = (list, selected) =>
  list.map(el => {
    const {name} = el;
 
    return <MenuItem text={name} key={name} selected={selected} />;
  });

  const Arrow = ({ text, className }) => {
    return (
      <div
        className={className}
      >{text}</div>
    );
  };

const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });
 
const selected = 'item1';
 
class AppList extends Component {
  constructor(props) {
    super(props);
    // call it again if items count changes
    this.menuItems = Menu(list, selected);
  }
 
  state = {
    selected
  };
 
  onSelect = key => {
    this.setState({ selected: key });
  }
 
 
  render() {
    const { selected } = this.state;
    // Create menu from items
    const menu = this.menuItems;
 
    return (
      <div className="App">
        <ScrollMenu
          data={menu}
          arrowLeft={ArrowLeft}
          arrowRight={ArrowRight}
          selected={selected}
          onSelect={() =>{this.onSelect()}}
        />
      </div>
    );
  }
}

export default AppList;

App.js

import logo from './logo.svg';
import './App.css';
import AppList from './AppList'

function App() {
return (
    <div>
   <AppList></AppList>
  </div>
  );
}

export default App;

从“/logo.svg”导入徽标；
导入“/App.css”；
从“./AppList”导入应用程序列表
函数App（）{
返回(
);
}
导出默认应用程序；

---

任何帮助都将不胜感激。谢谢

请出示您的DOM好吗

我认为你们的菜单就像一张有ul标签和li标签的列表。 默认情况下，ul标签留有余量

你可以这样做：

ul{
    margin-left:0;
}

我找到了答案

默认情况下，alignCenter为true。我将其更改为false，并删除了空格

---

我已经编辑了问题并添加了主App.js。

ul{
    margin-left:0;
}