Input overflowing with margin - border-box problem?

[GrumpyYoungMan]

Hello

A simple problem, but one I can not get my head around!

CodePen Demo

When the input field has a width of 100% and a margin it overflows the container as the container isn't taking into account the margin.

Any ideas any why or how to fix this issue, Please...

[coothead]

Hi there GYM,

change this...

Code: [Select]

#formLogin input {
    width:100%;
    max-width 100%;
    box-sizing: border-box;
    padding:0.5em 1em;
    margin: 0.5em;
}
...to this..

Code: [Select]

#formLogin input {
    width:100%;
    max-width 100%;
    box-sizing: border-box;
    padding:0.5em 1em;
    margin: 0.5em 0;
}
..and this...

Code: [Select]

fieldset {
    border:none;
}
...to this...

Code: [Select]

fieldset {
    border:none;
    padding:0 0.5em
}

Note: box-sizing  does not apply to the box's margins.

coothead

[GrumpyYoungMan]

Thank you and d'oh!!!

[coothead]

...and d'oh!!!

You are turning self deprecation into an art form.

coothead

[Jason Knight]

You are turning self deprecation into an art form.

Hey, that's my huffing job!

[GrumpyYoungMan]

You are turning self deprecation into an art form.

Hey, that's my huffing job!

😬🤦🏽‍♂️😂😂😂😂

[coothead]

Hey, that's my huffing job!

Unfortunately, T am useless at self deprecation
and my feeble attempts always fail miserably.

coothead