The issue you are facing is the default style that is computed on input
by your browser. The browser adds padding and a border to the <input>
element.
As you are setting width:100%;
on the input, if you add the default padding and border, it renders wider than the container and therefore overflows.
You can solve this by adding : box-sizing:border-box;
on the input
so padding and border are contained in the 100% width.
fieldset {
padding: 3px;
width: 300px
}
label {
float: left;
font-weight: bold;
}
input {
width: 100%;
box-sizing: border-box;
}
<fieldset>
<legend>Subscription info</legend>
<input type="text" name="name" id="name" />
</fieldset>
More info here about the box-sizing
property.