title: How to reduce excessive white space in fieldset/form-group
body: <p>I've managed to convert my html form to have some fields side-by-side in a form-group to reduce the overall height of the form, but I can't get rid of the excessive white space to the right of the fields. Is the red box below coming from the container, the fieldset or the form-group? I am very new to html/Boostrap.</p>
  
  <p><a href="https://i.stack.imgur.com/e2uPw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e2uPw.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
      &lt;meta name="robots" content="noindex,nofollow" /&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" /&gt;
      &lt;link rel="icon" href="https://wonderfest.com/wp-content/uploads/2017/01/favicon.ico" type="image/x-icon"/&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;title&gt;Search&lt;/title&gt;
  
      &lt;style&gt;
          #outline {
              position: relative;
              height: auto;
              width: auto;
              /*margin: 18px auto 0;*/
              margin: 10px 24px 0 24px;
              border: 1px groove #ddd !important;
          }
  
          .logoimages {
              width: auto;
              height: auto;
              position: absolute;
              text-align: center;
              top: 30px;
              left: 15px;
          }
  
          img {
              max-width: 100%;
              height: auto;
              width: auto\9; /* ie8 */
          }
  
          #title {
              width: auto;
              top: 90px;
              position: absolute;
              visibility: visible;
              left: 0px;
          }
          #title .title-content {
              font-family: 'Roboto', sans-serif;
              font-weight: bolder;
              font-size: 32px;
              color: #e6bb57;
          }
  
          .line-bottom {
              border-bottom: 5px solid #E6BB57;
              width: 400px;
              margin-left: auto;
              margin-right: auto;
          }
  
          p {
              color: #666;
              font-size: 16px;
              font-family: 'Roboto', sans-serif;
              font-weight: normal;
              margin-top: 5px;  
          }        
          h3 {
              color: #666;
              font-size: 60px;
              font-family: 'Roboto', sans-serif;
              font-weight: bold;
              text-align: center;
              letter-spacing: -1px;
              width: auto;
          }
          h4 {
              font-weight: bold;
              font-family: 'Roboto', sans-serif;
              text-align: center;
              margin: 1.33em 0;
          }
          h5 {
              font-weight: 500;
              font-family: 'Roboto', sans-serif;
              text-align: center;
              margin: 1.33em 0;
          }
          a {
              color: #666;
              font-family: 'Roboto', sans-serif;
              text-decoration: underline;
          }          
  
  
          fieldset.scheduler-border {
              border: 1px groove #ddd !important;
              padding: 0 1.4em 1.4em 1.4em !important;
              margin: 0 0 1.5em 0 !important;
              -webkit-box-shadow:  0px 0px 0px 0px #000;
              box-shadow:  0px 0px 0px 0px #000;
          }
  
          legend.scheduler-border {
              font-family: 'Roboto', sans-serif;
              font-size: 1.2em !important;
              font-weight: bold !important;
              text-align: left !important;
              width:auto;
              padding:0 10px;
              border-bottom:none;
          }
  
          /* Start by setting display:none to make this hidden.
             Then we position it in relation to the viewport window
             with position:fixed. Width, height, top and left speak
             for themselves. Background we set to 80% white with
             our animation centered, and no-repeating */
          .modalLoading {
              display:    none;
              position:   fixed;
              z-index:    1000;
              top:        0;
              left:       0;
              height:     100%;
              width:      100%;
              text-align: center;
              background: rgba( 255, 255, 255, .8 ) 
                          /*url('http://i.stack.imgur.com/FhHRx.gif') */
                          url('&lt;?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?&gt;')
                          50% 50% 
                          no-repeat;
          }
  
          /* When the body has the loading class, we turn
             the scrollbar off with overflow:hidden */
          body.loading .modalLoading {
              overflow: hidden;   
          }
  
          /* Anytime the body has the loading class, our
             modal element will be visible */
          body.loading .modalLoading {
              display: block;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;noscript&gt;
          &lt;style&gt;
              .pagecontainer {display:none;}
          &lt;/style&gt;    
          &lt;div class="noscriptmsg"&gt;
              &lt;h4&gt;JavaScript is disabled on your browser. You will not be able to use this application until it is enabled.&lt;/h4&gt;
              &lt;h5&gt;Please refer to your browser's specific configuration details to change this setting.&lt;/h5&gt;
              &lt;p align="center"&gt;© &lt;?php echo date('Y')?&gt; USA, INC.&lt;/p&gt;
              &lt;p align="center"&gt;Version &lt;?php echo $pageVer?&gt;&lt;/p&gt; 
          &lt;/div&gt;
      &lt;/noscript&gt;    
  
      &lt;div class="pagecontainer"&gt;
          &lt;div id="outline"&gt;
  
              &lt;div id="bckgrnd" style="text-align: center"&gt;
                  &lt;img src="../common/img/background-1.jpg"/&gt;
  
                  &lt;div class="logoimages" style="text-align: center"&gt;
                      &lt;img src="../common/img/combined_images.png" class="center-block img-responsive" id="top-img1" width="454" height="61" /&gt;
                  &lt;/div&gt;
                  &lt;div id="title" style="text-align: center"&gt;
                      &lt;h3 class="title-content"&gt;Search&lt;/h3&gt;
                      &lt;div class="line-bottom"&gt;&lt;/div&gt;
                  &lt;/div&gt;              
  
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;p align="center"&gt;
                      &lt;a href="javascript:window.location.href = '../common/php/logout.php';" class="btn btn-info btn-sm"&gt;
                          &lt;span class="glyphicon glyphicon-log-out"&gt;&lt;/span&gt; Log out
                      &lt;/a&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="container" style="padding:10px 10px;"&gt;
                  &lt;fieldset class="scheduler-border"&gt;
                  &lt;legend class="scheduler-border"&gt;Search criteria&lt;/legend&gt;
                      &lt;form id="searchForm" name="searchForm" class="form-horizontal"&gt;
  
                          &lt;div class="fields-search"&gt; &lt;!--for textfields --&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="col-sm-2"&gt;
                                    &lt;label for="barcode" class="sr-only"&gt;&lt;/label&gt;
                                    &lt;input id="barcode" name="barcode" class="form-control input-group-lg" type="text"  placeholder="Barcode" value=""&gt;
                                  &lt;/div&gt;       
                                  &lt;div class="col-sm-5"&gt;
                                    &lt;label for="entry-number" class="sr-only"&gt;&lt;/label&gt;
                                    &lt;input id="entry-number" name="entry-number" class="form-control input-group-lg" type="text"  placeholder="Entry # (separate multiple entries with commas)" value=""&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="col-sm-3"&gt;
                                    &lt;label for="first-name" class="sr-only"&gt;&lt;/label&gt;
                                    &lt;input id="first-name" name="first-name" class="form-control input-group-lg" type="text"  placeholder="First name" value=""&gt;
                                  &lt;/div&gt;       
                                  &lt;div class="col-sm-4"&gt;
                                    &lt;label for="last-name" class="sr-only"&gt;&lt;/label&gt;
                                    &lt;input id="last-name" name="last-name" class="form-control input-group-lg" type="text"  placeholder="Last name" value=""&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;&lt;!--/form-group--&gt;                        
  
                              &lt;div class="form-group"&gt;
                                  &lt;div class="col-sm-7"&gt;
                                      &lt;label for="title-name" class="sr-only"&gt;&lt;/label&gt;
                                      &lt;input id="title-name" name="title-name" class="form-control input-group-lg"  placeholder="Title or name of entry" value=""&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;                        
  
  
  
  
                         &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/fieldset&gt;
              &lt;/div&gt;
  
              &lt;br/&gt;
              &lt;br/&gt;
              &lt;div id="footer"&gt;
                  &lt;p align="center"&gt;© &lt;?php echo date('Y')?&gt;USA, INC.&lt;/p&gt;
                  &lt;p align="center"&gt;Version &lt;?php echo $pageVer?&gt;&lt;/p&gt; 
              &lt;/div&gt;        
          &lt;/div&gt;        
      &lt;/div&gt;
  
      &lt;div class="modalLoading"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I believe my problem is different than <a href="https://stackoverflow.com/questions/38736210/how-to-remove-or-reduce-the-white-space-in-bootstrap">How to remove or reduce the white space in bootstrap?</a> as I tried the no-padding class and made no difference.</p>