Twitter bootstrap column layout issue

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&nbsp;Lotus &nbsp;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;
       }