First three fields not aligned with others - html

Question

My problem is that first three fields are a little more to the right than the other fields. I don't know how to align those fields with the others.
I have an example on code pen.
Code for one of the problematic fields:
<div class="form-group">
<label for="inputRECE_DES" class="col-sm-2 control-label">Stranka:*</label>
<div class="col-sm-3">
<input type="text" id="inputACCO_NME" name="cACCO_NME" class="form-control" placeholder="#iLocalization._iTTmvc(Context, "#Enter few letters of client or VAT#")" value="#Model.cACCO_NME" />
</div>
<input type="hidden" id="hidden_iACCO_KEY" name="iACCO_KEY" readonly="readonly" value="#Model.iACCO_KEY" />
</div>

Answer 1

It looks like you were just missing a closing form-group DIV tag for your Kontact row, before the clearfix:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal do-not-submit" role="form" id="formJERECEProperties">
<input type="hidden" id="iRECE_KEY" name="iRECE_KEY" value="180001334">
<input type="hidden" id="hidden_cRECE_SRT" name="cRECE_SRT" value="6">
<input type="hidden" name="iENTE_KEY" value="110000007">
<input type="hidden" name="iBUUN_KEY">
<br>
<h3>testing</h3>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Testing</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputRECE_DBO" class="col-sm-2 control-label">Datum izposoje:</label>
<div class="col-sm-2">
<input type="text" class="form-control datepickerFiduro" name="b53b663f-86cb-422c-9b2a-a407990788e5" id="inputRECE_DBO" data-editable="1" data-default="true" value="08.03.2018" name1="dRECE_DBO">
</div>
<label for="inputRECE_DRE" class="col-sm-2 control-label">Datum vračila:</label>
<div class="col-sm-2">
<input type="text" class="form-control datepickerFiduro" name="a41fa57c-4654-4f13-a5eb-c4abb56a5950" id="inputRECE_DRE" data-editable="1" data-default="true" value="09.03.2018" name1="dRECE_DRE">
</div>
</div>
<div class="form-group">
<label for="inputRECE_DES" class="col-sm-2 control-label">Stranka:*</label>
<div class="col-sm-3">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input type="text" id="inputACCO_NME" name="98a4e8a7-55cb-4ab7-b075-7ab426566f5b" class="form-control ui-autocomplete-input" placeholder="Vpišite nekaj črk partnerja ali IDDDV"
value="" autocomplete="off" name1="cACCO_NME">
</div>
<input type="hidden" id="hidden_iACCO_KEY" name="iACCO_KEY" readonly="readonly" value="170000209" tabindex="-1">
</div>
<div class="form-group">
<label for="selectCONT_KEY" class="col-sm-2 control-label">Kontakt:</label>
<div class="col-sm-3">
<select id="selectCONT_KEY" class="form-control">
</select><input type="hidden" id="hidden_iCONT_KEY" name="iCONT_KEY">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group col-sm-12"></div>
<div class="form-group">
<label for="inputRECE_NME" class="col-sm-2 control-label">Ime reverza:</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="ead8d066-2618-4ed2-b03e-84c6cb46da4d" id="inputRECE_NME" value="" name1="cRECE_NME">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Skladišče:</label>
<div class="col-sm-3">
<select id="inputDIVI_KEY" name="iDIVI_KEY" class="form-control">
<option value="140001070">Centralno skladišče</option>
</select>
</div>
<div class="col-sm-7"> </div>
</div>
<div class="form-group">
<label for="inputRECE_TEL" class="col-sm-2 control-label">Telefon:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="4c40d2be-7f87-4faf-a6ba-0ff9b95be11b" id="inputRECE_TEL" value="" name1="cRECE_TEL">
</div>
<label for="inputRECE_MOB" class="col-sm-1 control-label">Mobilni tel.:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="958d73bd-723b-4234-b625-1927e9cab407" id="inputRECE_MOB" value="" name1="cRECE_MOB">
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="inputRECE_EML" class="col-sm-2 control-label">E-pošta:</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="4f653c8e-5613-449c-9b85-6850c8c857d7" id="inputRECE_EML" value="" name1="cRECE_EML">
</div>
<div class="col-sm-5">
</div>
</div>
<div class="form-group">
<label for="inputRECE_NTO" class="col-sm-2 control-label">Opomba:</label>
<div class="col-sm-7">
<textarea class="form-control" id="inputRECE_NTO" name="cRECE_NTO">Prevzel je:
2 kom line
2 kom corner</textarea>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="form-group">
<label for="selectRECE_STA" class="col-sm-2 control-label">Status:</label>
<div class="col-sm-2">
<select id="selectRECE_STA" name="cRECE_STA" class="form-control">
<option value="A" selected="">Osnutek</option>
<option value="B">Izdan</option>
<option value="9">Izbrisan</option>
</select>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</form>

Answer 2

The elements (in your codepen code) have different padding values due to different classes applied to them, which causes the different distance/width. Use a common class for all similar elements and a highly specific CSS selector to overwrite those settings with a common padding setting.