Twitter bootstrap column layout issue - css

Question

I Have the following code below , the problem i am having is that I noticed no matter what I do , I can't seem to have the right side of the extra real-state reduced as the right side seems to be having lots of extra spaces in step1 and step2.
I was trying to have it balanced for desktop, tablet and mobile.
Can some one show me how to fix this.
Here is my FIDDLE
My code below
HTML
<div class="container claim-c">
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>1</span></h2>
</div>
<div class="col-xs-8 col-sm10 col-md-9">
<h4 class="claim-hdr" style="color:#fff">CURRENT </h4>
<div class="row">
<div class="col-xs-9 col-sm-4 col-md-4 ">
<label class="control-label required" for="name">SOME SOME Number <i class="fa fa-asterisk" aria-hidden="true"></i></label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-9 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-9 col-sm-4 col-md-4">
<label class="control-label " for="name"> Some/test s Lotus Number</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider2">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>2</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 class="claim-hdr" style="color:#fff"> LoremIpsumorem Ipsum Lorem ipsum lorem ipsum Lorem ipsumLoremipsum lorem ipsum.</h4>
<div class="row">
<div class="col-xs-8 col-sm-4 col-md-4">
<label class="control-label " for="name">Date of Birth(MM/DD/YYYY)</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name"> Type</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-8 col-sm-2 col-md-1">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-8 col-sm-4 col-md-4">
<label class="control-label " for="name"> Name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name">ZIP </label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
</div>
CSS
.circle {
position: relative;
height: 50px;
width: 50px;
text-align: center;
line-height: 47px;
color: #000;
border-radius: 50%;
border: 2px solid #fff;
z-index: 999999;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: #fff;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid #000
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
.claim-c {
border: 2px solid #ccc;
background-color: #30A759;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.claim-c label {
color: #fff !important;
text-transform: uppercase;
padding-top: 15px;
}
.claim-divider {
border-right: 14px solid #fff;
height: 190px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 232px;
margin-top: 9px;
margin-bottom: 9px;
}
.claimBordercolor {
/* border:10px solid #FFCB00; */
border: 10px solid rgba(12, 64, 28, 0.91);
}
.claim-hdr {
width: 81%;
color: #fff;
text-transform: uppercase;
}
.margin-right20 {
margin-right: 20px;
}
.steppos {
color: #fff;
position: relative;
top: 7px;
font-weight: bold;
}
.orPos {
padding-right: 10px;
}
#media only screen and (max-width: 490px) {
body {
background-color: red;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
#media only screen and ( min-width:750px) {
body {
background-color: blue;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}

Answer 1

A few things:
you have a typo .col-sm10, should be, .col-sm-10
in one of your rows you have a total of a 10 cols. when the maximum in bootstrap is 12, so instead of
.col-sm-4 + .col-sm-2 + .col-sm-4 ( total = 10)
you can have:
.col-sm-5 + .col-sm-2 + .col-sm-5 ( total = 12)
Same thing applies to md classes
About xs class when you have .col-xs-9 you should have .col-xs-12
Snippet
.circle {
position: relative;
height: 50px;
width: 50px;
text-align: center;
line-height: 47px;
color: #000;
border-radius: 50%;
border: 2px solid #fff;
z-index: 999999;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: #fff;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid #000
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
.claim-c {
border: 2px solid #ccc;
background-color: #30A759;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.claim-c label {
color: #fff !important;
text-transform: uppercase;
padding-top: 15px;
}
.claim-divider {
border-right: 14px solid #fff;
height: 190px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 232px;
margin-top: 9px;
margin-bottom: 9px;
}
.claimBordercolor {
/* border:10px solid #FFCB00; */
border: 10px solid rgba(12, 64, 28, 0.91);
}
.claim-hdr {
width: 81%;
color: #fff;
text-transform: uppercase;
}
.margin-right20 {
margin-right: 20px;
}
.steppos {
color: #fff;
position: relative;
top: 7px;
font-weight: bold;
}
.orPos {
padding-right: 10px;
}
#media only screen and (max-width: 490px) {
body {
background-color: red;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
#media only screen and (min-width: 750px) {
body {
background-color: blue;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container claim-c">
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider">
<h2 class="steps"> <span class="steppos">STEP</span> <span class="circle pull-right">1</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 style="color:#fff" class="claim-hdr">CURRENT </h4>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="name" class="control-label required">SOME SOME Number <i aria-hidden="true" class="fa fa-asterisk"></i>
</label>
<input type="text" placeholder="Enter name" name="name" id="name" class="form-control" vk_1d97d="subscribed">
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="name" class="control-label ">Some/test s Lotus Number</label>
<input type="text" placeholder="Enter name" name="name" id="name" class="form-control" vk_1d97d="subscribed">
</div>
</div>
</div>
</div>
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider2">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>2</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 class="claim-hdr" style="color:#fff"> LoremIpsumorem Ipsum Lorem ipsum lorem ipsum Lorem ipsumLoremipsum lorem ipsum.</h4>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label class="control-label " for="name">Date of Birth(MM/DD/YYYY)</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name"> Type</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-12 col-sm-5 col-md-5">
<label class="control-label " for="name"> Name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name">ZIP </label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
</div>
</div>

Answer 2

Change the col-md-4 to col-md-6.
<div class="col-xs-9 col-sm-4 col-md-6 ">
Also you have a few instances of colsm without the hyphen in between.
http://codepen.io/ruchiccio/pen/KzbBvB