Organize filter and leave responsive

Question

Good Afternoon Could you help me organize this filter and make it responsive? Follows the code:

 <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    #filtrotopo {
            border-style: double;
            background: #484949;
    }

    #button1 {
        width: 120px;
        position: inherit;
        right: 10px;
        background-color: #e00505;
        font-size: 12px;
        float: right
    }

    #h4topo {
            text-align: center;
            color: white;
            font-size: 18px;
    }

    select {
        border: 1px solid #000;
        box-sizing: border-box;
        width: 124px;
        border-radius: 5px;
        height: 25px;
        padding: 3px;
    }

    section label {
        width: calc(100% / 4);
        color: red;
        text-align: center;
    }

    section {
        display: flex;
        flex-wrap: wrap;
    }
    h4/ {
        border-style:double;
    }

    @media screen and (max-width:768px) {
        section label {
            margin-bottom: 20px;
            width: 100%;
        }
    }
</style>
<div id = "filtrotopo">
    <h4 style="text-align: center;" id="h4topo">Personalize o seu Kit de Segurança</h4>

    <form action="#" id="form1">

        <section>
            <label>
                <select name="speed" id="speed">
                    <option selected>Selecione</option>
                    <option>Residencial</option>
                    <option>Comercial</option>
                </select>
            </label>
            <label>
                <select name="files" id="files">
                    <option selected> Selecione </option>
                    <option value="HD">HD</option>
                    <option value="FHD">Full HD</option>
                    <option value="ANL">Analógica</option>

                </select>
            </label>
            <label>
                <select name="number" id="number">
                    <option selected> Selecione </option>
                    <option value='1'>1 Câmera</option>
                    <option value='2'>2 Câmeras</option>
                    <option value='3'>3 Câmeras</option>
                    <option value='4'>4 Câmeras</option>
                    <option value='5'>5 Câmeras</option>
                    <option value='6'>6 Câmeras</option>
                    <option value='7'>7 Câmeras</option>
                    <option value='8'>8 Câmeras</option>
                    <option value='9'>9 Câmeras</option>
                    <option value='10'>10 Câmeras</option>
                    <option value='11'>11 Câmeras</option>
                    <option value='12'>12 Câmeras</option>
                    <option value='13'>13 Câmeras</option>
                    <option value='14'>14 Câmeras</option>
                    <option value='15'>15 Câmeras</option>
                    <option value='16'>16 Câmeras</option>
                </select>
            </label>
            <label>
                <select name="salutation" id="salutation">
                    <option selected >Selecione</option>
                    <option>Intelbras</option>
                    <option>Hikvision</option>
                    <option>Outras</option>
                </select>
            </label>
        </section>
    <label><button type="submit" class="kd-filter-button" id="button1" form="form1">Ver resultados</button></label>
    </form>
</div>



<script>
    var frmVals = window.location.search.substr(1).split('&');
    for (val in frmVals) {
        var ref = frmVals[val].split('=');
        document.getElementById(ref[0]).value = ref[1];
    }
</script>
<br>

In the case it is currently so:

I want to leave the button on the right of options, bring the options closer in a more presentable way... and leave responsive Could you help me?

Answer 1

You can make a CSS adjustment in the Section that is with the labels inside, and use justfy-content:center to put everything in the center. Ai you put the label of button tb within that unit

Behold

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#filtrotopo {
      border-style: double;
      background: #484949;
}

#button1 {
  width: 120px;
  position: inherit;
  right: 10px;
  background-color: #e00505;
  font-size: 12px;
  float: right
}

#h4topo {
      text-align: center;
      color: white;
      font-size: 18px;
}

select {
  border: 1px solid #000;
  box-sizing: border-box;
  width: 124px;
  border-radius: 5px;
  height: 25px;
  padding: 3px;
}

section label {
  /* width: calc(100% / 5); */
  color: red;
  text-align: center;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
h4 {
  border-style:double;
}

label {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

@media screen and (max-width:768px) {
  section label {
      margin-bottom: 20px;
      width: 100%;
  }
}

<div id = "filtrotopo">
<h4 style="text-align: center;" id="h4topo">Personalize o seu Kit de Segurança</h4>

<form action="#" id="form1">

  <section>
      <label>
          <select name="speed" id="speed">
              <option selected>Selecione</option>
              <option>Residencial</option>
              <option>Comercial</option>
          </select>
      </label>
      <label>
          <select name="files" id="files">
              <option selected> Selecione </option>
              <option value="HD">HD</option>
              <option value="FHD">Full HD</option>
              <option value="ANL">Analógica</option>

          </select>
      </label>
      <label>
          <select name="number" id="number">
              <option selected> Selecione </option>
              <option value='1'>1 Câmera</option>
              <option value='2'>2 Câmeras</option>
              <option value='3'>3 Câmeras</option>
              <option value='4'>4 Câmeras</option>
              <option value='5'>5 Câmeras</option>
              <option value='6'>6 Câmeras</option>
              <option value='7'>7 Câmeras</option>
              <option value='8'>8 Câmeras</option>
              <option value='9'>9 Câmeras</option>
              <option value='10'>10 Câmeras</option>
              <option value='11'>11 Câmeras</option>
              <option value='12'>12 Câmeras</option>
              <option value='13'>13 Câmeras</option>
              <option value='14'>14 Câmeras</option>
              <option value='15'>15 Câmeras</option>
              <option value='16'>16 Câmeras</option>
          </select>
      </label>
      <label>
          <select name="salutation" id="salutation">
              <option selected >Selecione</option>
              <option>Intelbras</option>
              <option>Hikvision</option>
              <option>Outras</option>
          </select>
      </label>
      <label><button type="submit" class="kd-filter-button" id="button1" form="form1">Ver resultados</button></label>
  </section>
</form>
</div>