Я работаю над реактивным проектом, я собрал все компоненты, но когда я запускаю проект, кажется, что все элементы ul, которые я использовал в компонентах, не в центре, они немного смещены в правую сторону компонента.
Это мой код для полей ввода
const NumberFactsInputs = ({ state, inputChange }) => {
if(state.categoryValue === 'trivia' || state.categoryValue === 'math') {
return(
<div>
<ul >
<li> <input className='br3 dib pa1 ma2 bg-lightest-blue bn' value={state.number} type='number' placeholder='Number' onChange={inputChange} /></li>
<li> <input readOnly className='br3 dib pa1 ma2 bg-lightest-blue bn' value={state.date} type='number' placeholder='MM/DD' style={{opacity: 0.4}} onChange={inputChange} /></li>
<li> <input readOnly className='br3 dib pa1 ma2 bg-lightest-blue bn' value={state.year} type='number' placeholder='YYYY' style={{opacity: 0.4}} onChange={inputChange} /></li>
</ul>
</div>
);
}
Это моя основная функция рендеринга, которая находится в компоненте контейнера, где я пытался расположить все в центре, кроме ul элементы не идеально отцентрированы.
render() {
return(
<div className='tc bg-light-blue dib br3 pa3 ma3 bw2 shadow-5'>
<h1>Number Facts</h1>
<NuberFactsCategories changeCategory = {this.onChangeCategory} />
<NumberFactsInputs state={this.state} inputChange={this.onInputChange} />
<DisplayText text={this.state.displayText}/>
<ul style={{listStyle: 'none'}}>
<li style={{ display: 'inline-block' }}> <SubmitButton buttonClick={this.onButtonClick} /> </li>
<li className='ml3' style={{ display: 'inline-block' }}> <RandomButton randomClick={this.randomButtonClick} /> </li>
</ul>
</div>
);
}
}
Изображение веб-страницы, здесь вы можете видеть, поля ввода и кнопки не в центре. 
Это мой css файл для полей ввода.
li {
list-style: none;
display: inline-block;
}
input {
width: 70px;
text-align: center;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
Нет файла css для элемента ul, который предназначен для кнопок, все стилизация выполняется с помощью встроенного блока стиля.