Can't remove the margin

Question

My div is positioned a little right from the left surface, why's this happening and how to avoid this?
https://code.sololearn.com/WmIXDsEI5J0u/?ref=app

Answer 1

Maybe it's because of body margin, set margin: 0; in CSS for body selector.

Answer 2

Rishi What I usually will do is add the following if I am trying to line everything from the top and left side..
I added this to your #box and it fit in the corner exactly. Not sure if that was what you were seeking.

margin-left:-7px;
margin-top:-7px;

I also just did this and it moved the box all the way to the left as well

body{
margin-left:.37px;
padding:0px; }

Answer 3

Thank you Ipang and BroFar 😊

Answer 4

#box{
width:400px;
height:50px;
background-color:black;
z-index: 1;
}

body{
padding:0px;
margin:0px;
}

Answer 5

Ipang yeah it works! I didn't think of it cuz i thought the margin is outside the area, so it must be the padding that's causing this. Can you explain how margin is affecting this?

Answer 6

You're right, margin is the outer distance between an element's border and its parent border.

Imagine we have two envelopes, put big envelop on a table, then stack the smaller one on top of the bigger one. The part of bigger envelope that's uncovered is margin in context of the smaller envelop.

(Edit)
In relation to the code, body is the big envelop, and #box is the smaller envelop.

Answer 7

Yeah Krishna Singh and Israel Promise it works! Tnx :)

Answer 8

Set margin: 0px; in body section inside css file

Answer 9

I just added "margin:0px" to your code and I think it removed it...

So add margin:0 after the padding

Answer 10

you can reset the margin at the top of your css:

*{
margin: 0;
padding: 0;
}

Answer 11

Aakash Kumar Jose sobhan jaefari works! Thank you😊

Answer 12

Try changing the background margin and padding property vaalues

Answer 13

Just change the #box margin to auto and apply box-sizing : border-box; in body

That's easy...

Answer 14

Richard Kamski it's okay, thank you for trying to help😊

I already got a lot of answers so I probably know this already.

Answer 15

Because your div have width 400 px

Try this:

*{margin:0;
Padding:0;}

#box{width:100%;}

Answer 16

Hey, I saw your post, this is the way to do it right
https://code.sololearn.com/WsRGcOtT1TSO/?ref=app
ask any questions!

Answer 17

Richard Kamski the code you shared is not loading. I think maybe the there's an error in the link

Answer 18

I accidentally deleted the code from my code section
I didn't know that would also delete the code from my comment😂

Answer 19

I can redo it if you still want some help