Why <hr> goes right though use "margin- auto"?

Question

https://code.sololearn.com/WIosqjkHX9Tj/?ref=app

Answer 1

Add this line to your hr styling
box-sizing:border-box ;
Happy coading ☺️

Answer 2

I know that,it works on padding only🤔. Can you explain a little more. Thanks

Answer 3

Let assume you create a box(div) with height 100px and width is 100px
And if you add 10px border then It's height will be 100px height + 10px top border + 10px bottom border = 120px
And also width be 120px
This is also apply on margin and padding so the actual size of box is larger than you defined and position problem accured
But when you write border-box then give border 10px then it adjust in your 100px
So box height will be = 100px box width -10px top border +10px bottom border = 80px
And top and bottom border 20px add to it then it will be 100px it's will only take the area defined by user
this is also apply on margin and padding
I hope with this you will understand what going on ( I am not a good explainer 😅)
For understanding box-sizing property easily and better you should check it out