How to get rid of this extra white space for my div?

Question

I create this app with create-react-app cli and I cannot get rid of these extra white spaces at top, left and right side of my main container. Take a look at the screenshot below. I have only one div for this app yet and I have the following css for the div.

 .mainContainer{ display: flex; flex-direction: column; background-color: black; } 

What I have tried is setting both margin and padding for 0px, but neither of them works.

Answer 1

html, body { margin: 0; padding: 0 }

Answer 2

You can right-click on the page, select Inspect and you will be able to see where this margin/padding is coming from. A console will appear, move your mouse over the HTML elements to see a color overlay over the page element. You will be able to see what CSS is doing this and adjust it.

I think you will be able to get rid of it by doing this .mainContainer { padding: 0, margin: 0 } but maybe you will only have to reset the padding or the margin, not both.