I'm quite new to html css and was hoping to get some help with how to build a form. At the moment the whole form is complete but I'm unable to edit it with css. The main problem is that the button is way too close to the text-bar but I cannot add a padding for it to look better (the button code is almost at the end). I tried adding a button-container css styling with padding but that would not work. 

I also tried to only have one object per row without it being "col-sm-12" so that it only would take up half of the available space but couldn't make it work. I wanted to have the "Kategori" input field be col-sm-6 and then the next input fields to be on the row below. 

Any help would be much appreciated.

html: 

```css
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container-button {
  margin-top: auto;
  padding-top: 15px;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<section class="text-center ">
  <div class="container">
    <div class="row">
      <div class="col-sm-10 col-md-7">

        <!-- <form class="text-left form-email" data-success="Thanks for your enquiry, we'll be in touch shortly." data-error="Please fill in all fields correctly." data-recaptcha-sitekey="6LewhCIUAAAAACSwFvBDhgtTbw6EnW6e9dip8o2u" data-recaptcha-theme="light"> -->
        <div class="col-sm-6">
          <label>Eventets namn:</label>
          <input type="text" name="Name" class="validate-required" />
        </div>
        <div class="col-sm-6">
          <label>Arrangeras av:</label>
          <input type="email" name="email" class="validate-required validate-email" />
        </div>
        <div class="col-sm-4">
          <label>Datum och tid</label>
          <input type="text" name="date-check-in" class="datepicker datepicker--fluid" placeholder="Startdatum" />
        </div>
        <div class="col-sm-2">
          <label></label>
          <div class="input-select input-select--borderless">
            <select name="guests">
              <option value="1">1</option>
              <option value="2" selected="">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="6+">6+</option>
            </select>
          </div>
        </div>
        <div class="col-sm-4">
          <label>Slutdatum och tid</label>
          <input type="text" name="date-check-out" class="datepicker datepicker--fluid" placeholder="Slutdatum" />
        </div>
        <div class="col-sm-2">
          <label></label>
          <div class="input-select input-select--borderless">
            <select name="guests">
              <option value="1">1</option>
              <option value="2" selected="">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="6+">6+</option>
            </select>
          </div>
        </div>
        <div class="col-sm-12">
          <label>Plats:</label>
          <input type="email" name="email" class="validate-required validate-email" />
        </div>
        <div class="col-sm-12">
          <label>Beskrivning:</label>
          <textarea rows="6" name="Message" class="validate-required"></textarea>
        </div>

        <div class="col-sm-12">
          <label></label>
          <div class="input-select input-select--borderless">
            <select name="guests">
            <option value="1" selected="">Kategori</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="6+">6+</option>
            </select>
          </div>
        </div>

        <div class="col-sm-3">
          <label>Guests</label>
          <div class="input-select input-select--borderless">
            <select name="guests">
              <option value="1">1</option>
              <option value="2" selected="">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="6+">6+</option>
            </select>
          </div>
        </div>
        <div class="col-sm-3">
          <label>Eventets namn:</label>
          <input type="text" name="Name" class="validate-required" />
        </div>
        <div class="col-sm-3">
          <label>Eventets namn:</label>
          <input type="text" name="Name" class="validate-required" />
        </div>
        <div class="col-sm-3">
          <label>Eventets namn:</label>
          <input type="text" name="Name" class="validate-required" />
        </div>

        <div class="container-button">
          <div class="col-sm-5 col-md-12">
            <button type="submit" class="btn btn--primary type--uppercase container-button">Lägg till biljettyp</button>
          </div>
        </div>

        <!-- </form> -->

      </div>
    </div>
    <!--end of row-->
  </div>
  <!--end of container-->
</section>
```