Skip to main content
<!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>

* {
  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;
}
<!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>
* {
  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;
}
 

<!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>
* {
  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;
}

* {
  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;
}
<!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>
 

Fonte Link

Problemas com responsividade HTML/CSS

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

<!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>
* {
  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;
}