CODEWITHSUNDEEP
htmlcssreactjs
Zip
Zip

Reputation: 5592

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

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.

enter image description here

Upvotes: 0

Views: 2949

Answers (2)

Vincent D'amour
Vincent D'amour

Reputation: 3903

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.

Upvotes: 0

Andy Ray
Andy Ray

Reputation: 32076

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

Upvotes: 4

Related Questions