Why is Input longer than the div it's in?

Question

css

I am correcting the layout after one person is clearly not a layout master, there is actually a form, it is all crooked and on a different screen in different ways, I look at the code, there he gave different fields a width of 91% and 71%, they should be completely different sizes, but for some reason they seem that one, and at 100% they are longer than the div in which they lie, who knows how to make the input at 100% take the size of the div?

Answer 1

Help htmlbook.ru/css/box-sizing

Answer 2

Extremely overloaded selectors, no need to specify full nesting. It is better to show the code on jsfiddle or codepen. In other answers, everything was correctly indicated to you about the box-sizing:border-box property; here is your example jsfiddle.net/straj/nzx42mwq

Answer 3

Maybe the input has padding, then the width of that input = 100% + padding. Then you can set box-sizing: border-box and padding will not be taken into account. But it would be easier if you showed the code, because now it's a finger to the sky or divination on the coffee grounds.

Answer 4

<div class="form-block">
            <div class="line-first">
                <input placeholder="First Name" id="shipping_firstname" name="shipping[firstname]" class="inp step4 small-input first-item" value="">
                <input placeholder="Last Name" id="shipping_lastname" name="shipping[lastname]" class="inp step4 small-input" value="">
                <div class="clear"></div>
            </div>
            <div class="line-large"><input placeholder="Street" id="shipping_street" name="shipping[street]" class="inp step4 input-address" value=""></div>
            <div class="line-small">
                <input placeholder="City" id="shipping_city" name="shipping[city]" class="inp step4 input-city" value="">
                <!-- new select -->
                <select class="select inp step4 select-state" id="shipping_region" name="shipping[region]">
                    <option>State</option>
                                            <option value="1">Alabama</option>
                                    </select>
                <input placeholder="ZIP" id="shipping_postcode" name="shipping[postcode]" class="inp step4 input-zip" value="">
                <div class="clear"></div>
            </div>
            <div class="line-large"><input placeholder="Phone Number (xxx-xxx-xxxx)" id="shipping_telephone" name="shipping[telephone]" class="inp step4 input-phone" value=""></div>
            <!--            </div>-->
        </div>

.show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block {
      width: 60%;
      margin: auto; 
      display:block;}
      .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-first {
        width: 100%; }
        .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-first .first-item.small-input {
          margin: 0; }
        .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-first .small-input {
          width: 49.5%;
          float: left;
          height: 15px;
          padding: 2%;
          margin: 0%;
          font-size: 12px; }
      .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-large {
        width: 100%; }
        .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-large .input-phone {
          margin-top: 0;
          margin-bottom: 2%; }
        .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-large input {
          width: 100%;
          float: left;
          height: 15px;
          padding: 2%;
          margin: 2% 0% 0% 0%;
          font-size: 12px; }
      .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-small {
        width: 100%;
        margin-left: 0%; }