Hello, 

I am having some issues with fixing the size of my number field. I have highlighted the field in purple as you can see the field is extending beyond the red border, I would like to shrink it to fit but changes to the CSS are not responding. Could someone help me identify why I am doing wrong?

Code Below:

/*If you want to center buttons*/
//.btn-wrapper{width:100%; text-align:center}

/*This is useful when using pictures for a background*/
body {
  background-repeat: no-repeat; 
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

 /*Displays two fields per line*/
.TwoPerLine{display: inline-block; width:365px;}
.TwoPerLine > .cf-field {width: 335px !important;}
.TwoPerLine .cf-medium {width:100%;}

 /*Displays deadline with dateline together switch solid to none in border style to make invisible or vise versa for testing*/
.requestdeadline {display: inline-block; width:215px;border-style:solid;border-color:red !important;}
.requestdeadline > .cf-field {width: 30px ;border-style:solid;border-color:green !important;}
.requestdeadline .cf-medium {width:80%;border-style:solid;border-color:blue !important;}
 /*Displays dateline with deadline fields together*/
.requestdateline {display: inline-block; width:365px;border-style:solid;border-color:red !important;}
.requestdateline > .cf-field {width: 30px ;border-style:solid;border-color:green !important;}
.requestdateline .cf-medium {width:80%;border-style:solid;border-color:blue !important;}

 /*Displays date and day group*/
.TwoDate{display: inline-block; width:215px;border-style:solid;border-color:red !important;}
.TwoDate > .cf-field {width: 168px !important;}
.TwoDate .cf-medium {width:80% !important;}
.totaldays {display: inline-block; width:110px;border-style:solid;border-color:red !important;}
.totaldays .cf-field {width: 33px; border-style:solid;border-color:purple !important;}
.totaldays .cf-small {width:33px;border-style:solid;border-color:blue !important;}



 /* Displays three fields per line */
.ThreePerLine {display: inline-block; width: 33%;}
.ThreePerLine .cf-small {width:100%;}

 /*Hides fields*/
.hide {display:none;}

/*This makes the background for read-only fields white instead of gray*/
.cf-formwrap input[readonly]{background-color:#ffffff!important;border:0px;}
.cf-formwrap select[readonly]{background-color:#ffffff!important;border:0px;}
.cf-formwrap textarea[readonly]{background-color:#ffffff!important;border:0px;}