CSS div is larger than border of the div its within

Question

As it stands, I'm trying to write a form which is responsive for the device that is displaying the webpage. However, I have an issue that, for the styling, I can't get the div which holds the form content to be within the main dic, which I proved with adding borders to the div. I know there is probably a simple answer, but I can't figure it out.

As viewed from a mobile device, this is what I currently see, with a div that is not centred within the page.

And this is what the content div looks like

This is what the new_user css is (the div within the div)

.form.new_user {
            display: inline-block;
            width: 100%;
            min-width: 230pt;
            max-width: 270pt;
            border-color: #3e3e3e;
            border-width: 1px;
            border-style: solid;
            padding: 5pt;
        }

        @media screen and (max-width: 600pt){
            .form.new_user {
                min-width: 100px;
                max-width: inherit;
            }
        }

And then also the css for the content div

.content {
    padding: 7pt;
    margin: 7pt;
}

Thank you in advance.

EDIT:

HTML code below.

<body>
<div class="content">
<div class="form new_user>
</div>
</div>
</body>

And also I have the css for body as

body {
    margin: 0;
    font-family: Helvetica, sans-serif;
}

Can you share your HTML code or make a snippet so that we can see your result? — Sato Takeru, Oct 09 '21 at 07:59

score 1 · Accepted Answer · answered Oct 09 '21 at 08:51

Because..

By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.

Just add *{box-sizing: border-box;} You can find more info here

*{box-sizing: border-box;}
body {
    margin: 0;
    font-family: Helvetica, sans-serif;
}
.form.new_user {
            display: inline-block;
            width: 100%;
            min-width: 230pt;
            max-width: 270pt;
            border-color: #3e3e3e;
            border-width: 1px;
            border-style: solid;
            padding: 5pt;
        }
.content {
    padding: 7pt;
    margin: 7pt;
}

        @media screen and (max-width: 600pt){
            .form.new_user {
                min-width: 100px;
                max-width: inherit;
            }
        }

<body>
<div class="content">
<div class="form new_user">
</div>
</div>
</body>

CSS div is larger than border of the div its within

1 Answers1