title: Bootstrap Navbar Collapse Margins
body: <p>I'm looking for a way to adjust the margins on the elements within my Navbar-Collapse (I've included a picture below).  I'm just needing the left side of the search field and select box to line up with the Navbar-Brand.  Below is the HTML for the navbar as well as my attempted solution.  Thanks in advance for any advice!
  -J</p>
  
  <pre><code>&lt;nav class="navbar fixed-top navbar-dark bg-dark"&gt;
      &lt;div class="container"&gt;
          &lt;a class="navbar-brand" href="#"&gt;Airforce Inventory Information Database&lt;/a&gt;
          &lt;!--&lt;button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#navbar9"&gt;--&gt;
          &lt;button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar9" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="icon-bar top-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar middle-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar bottom-bar"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;!--&lt;div class="navbar-collapse collapse" id="navbar9"&gt;--&gt;
          &lt;div class="collapse navbar-collapse" id="navbar9"&gt;
              &lt;ul class="navbar-nav ml-auto"&gt;
                  &lt;form class="form-inline" data-toggle="#octopart" action="http://octopart.com/search" style="padding-top: 10px;"&gt;
                      &lt;input class="form-control mr-sm-2" type="search" name="q" placeholder="Search Octopart ..." name="search" style="width: 45%;"&gt; 
                      &lt;button class="btn btn-outline-success my-2 my-sm-0" data_target="#octopart" type="submit"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/form&gt;
                  &lt;div class="input-group mb-3"  data-toggle="#parts" style="width: 35%; padding-top: 5px; padding-bottom: 10px;"&gt;
                      &lt;div class="input-group-prepend"&gt;
                          &lt;label class="input-group-text" for="inputGroupSelect01"&gt;Devices&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;select class="custom-select" id="menu"&gt;
                          &lt;option value='capacitors'&gt;Capacitors&lt;/option&gt;
                          &lt;option value='inductors'&gt;Inductors&lt;/option&gt;
                          &lt;option value='resistors'&gt;Resistors&lt;/option&gt;
                          &lt;option value='miscellaneous'&gt;Miscellaneous&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;    
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;     
  &lt;/nav&gt; 
  </code></pre>
  
  <p><strong>Attempt:</strong> </p>
  
  <pre><code>.navbar &gt; .collapse &gt; .form-inline, .input-group {
      margin-right: -12.5%;
  }
  </code></pre>
  
  <p><strong>Picture:</strong>
  <a href="https://i.stack.imgur.com/x540K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x540K.png" alt="enter image description here"></a></p>