I'm encountering an issue with my unordered list where the li elements are not rendering properly. The first element seems to have a margin, and I'm unsure why this is happening. How can I fix this problem?
function App() {
return (
<ul
style={{
position: 'absolute',
width: '75%',
height: '5%',
left: '12.5%',
top: '25%',
'list-style-type': 'none',
'background-color': '#f8d7d7'
}}
>
<li
style={{
width: '20%',
float: 'left',
height: '100%'
}}
/>
<li
style={{
width: '20%',
float: 'left',
height: '100%'
}}
/>
<li
style={{
width: '20%',
float: 'left',
height: '100%'
}}
/>
</ul>
)
}
ReactDOM.render(<App />, document.getElementById('root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>