[SalesForce] Community Theme Full width layout

SLDS (as a seperate thing from Lex) is currently "BYOJS" -- there's no data-toggle or hiding classes baked in, you need to bring all of those yourself, using whatever javascript framework you're using on the page. Someday, Lightning Components MIGHT give us some of that, but you're not working with them anyway! Whatever javascript library you're using on the page, you should use to close the modal in the idiomatic fashion for that library.

Since I'm not familiar with

<lightning:select />

tag, I would go with the native select tag in HTML and styled with SLDS. However, you will need to use the grid otherwise, the select bar will extend the width of the screen.

You can easily put this code into your row tag (and then, you may not need to use slds-grid to align). You will probably need to play around with it a little bit.

<div class="slds-grid">
    <div class="slds-form-element">
      <label class="slds-form-element__label" for="select-01">Product Line</label>
      <div class="slds-form-element__control">
        <div class="slds-select_container">
          <select id="select-01" class="slds-select">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </select>
        </div>
      </div>
      <label class="slds-form-element__label" for="select-01">Instrument Type</label>
      <div class="slds-form-element__control">
        <div class="slds-select_container">
          <select id="select-01" class="slds-select">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </select>
        </div>
      </div>
    </div>
</div>

You can also set the margin widths of the slds-form-element.

I took this example from lightning's design documentation: Lightning Design System - Select

Hope you find this helpful!