How to remove the default margin in create-react-app?

Question

I made a new app using the create-react-app command. I removed most of the files in the src folder. So now my folder looks like this:

index.js has

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

And App.js includes

import React from 'react'

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

Now, when I run yarn start and go to my browser, it shows:

Question: You can clearly see some left margin given to the 'Hello World' text. Why is that? I have included no CSS file whatsoever! Also, how do I remove it?

Answer 1

It's because of default browser CSS. You can reset these using the following code.

* {
  margin: 0;
  padding: 0;
}

You can add this CSS code to your global CSS file.