sou iniciante e estou me aventurando no mundo de desenvolvimento Web. Estou tendo problemas para aplicar responsividade nas páginas, sempre fica ~sobrando~ espaço no body (aparece uma barra de rolagem horizontal) e quando mudo de tela o alinhamento dos componentes sempre fica diferente. Essa é minha primeira pergunta na plataforma, então desde já peço perdão caso o código seguinte não dê as informações necessárias. Agradeço pela atenção

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    * {
      margin: 0;
      border: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Roboto", sans-serif;
    }

    body {
      min-width: 100vh;
      min-height: 100vh;
    }

    section .listServices {
      position: relative;
      top: 20vh;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    section .listServices ul {
      list-style: none;
      position: relative;
    }

    section .listServices ul li {
      list-style: none;
      position: relative;
      padding-top: 1vh;
      font-size: 3vh;
      font-weight: 450;
    }

    #check {
      color: #D6000D;
      margin-right: 1vh;
    }

    section .listServices img {
      width: 450px;
      height: 400px;
    }

    form {
      position: relative;
      left: 50vh;
      top: 33vh;
    }

    form .callBack h3 {
      font-size: 3vh;
      padding-bottom: 1vh;
    }

    form input[type="tel"] {
      margin-top: 2rem;
      padding: 0.7rem;
      background: rgba(0, 0, 0, 0.2);
      color: white;
      font-size: 0.9rem;
      font-weight: 300;
      border-radius: 5px;
    }

    form input::placeholder {
      color: gray;
      padding-left: 1vh;
      padding-top: 1vh;
      padding-bottom: 1vh;
      font-weight: 500;
      font-size: 1.7vh;
    }

    form input[type="submit"] {
      margin-top: 2rem;
      margin-left: 1vh;
      padding: 0.7rem 2rem;
      background: #D6000D;
      color: white;
      font-size: 0.9rem;
      font-weight: 500;
      border-radius: 5px;
    }

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Serviços</title>
      <script src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
      <link rel="stylesheet" href="style2.css">
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    </head>

    <body>

      <section>
        <div class="listServices">
          <ul>
            <li><i class="fas fa-check-circle" id="check"></i> Domínio personalizado</li>
            <li><i class="fas fa-check-circle" id="check"></i> Hospedagem</li>
            <li><i class="fas fa-check-circle" id="check"></i> Site responsivo</li>
            <li><i class="fas fa-check-circle" id="check"></i> Redes sociais</li>
            <li><i class="fas fa-check-circle" id="check"></i> Chat online</li>
            <li><i class="fas fa-check-circle" id="check"></i> Blog integrado</li>
          </ul>

          <img src="coding.png">

        </div>

        <form>

          <div class="callBack">
            <h3>Nossa equipe está à disposição!</h3> <br>

            <input type="tel" id="tel" class="tel" placeholder="Celular">
            <input type="submit" value="Ligamos para você">

          </div>

        </form>



    </body>

    </html>

<!-- end snippet -->