soy bastante nuevo en esto del desarrollo web, quiero saber porque luego de hacer mi html y css recargo mi pagina y me sale un scroll horizontal, todo se ve mas grande y al lado derecho un espaciado blanco, a la vista de 80% de google se logra ver bien, pero al 100% no, que debo hacer? de hecho vi el uso de overflow-x hidden, lo use y mejoro un poco pero sigue el error... he hecho muchas cosas que veo en internet pero sigue sin solucion. Acepto correciones del codigo y demas, soy novato, graciasssss.
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html{
background-color: #FFFFFF;
}
body{
}
.container__header{
box-sizing: border-box;
display: flex;
position: absolute;
width: 1920px;
height: 80px;
left: 0px;
right: 0px;
justify-content: space-between;
align-items: center;
background: #3090F6;
border: 1px solid #000000;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
overflow-x: hidden;
}
.menu{
position: absolute;
width: 100%;
height: 26px;
right: 418px;
left: 1008px;
display: flex;
top: 27px;
}
.menu nav ul{
display: flex;
}
.menu nav ul li{
list-style: none;
padding-right: 110px;
}
.menu nav ul li a{
font-size: 20px;
font-weight: 700;
line-height: 130%;
text-decoration: none;
color: #FFFFFF;
text-align: center;
font-style: normal;
}
/*boton*/
.header__contacto{
position: relative;
width: 175px;
height: 53px;
right: 143px;
left: 1602px;
}
.btn__header-register{
position: absolute;
width: 175px;
height: 53px;
border-radius: 10px;
background: #FFFFFF;
border: none;
color:#3090F6;
cursor: pointer;
font-size: 20px;
font-weight: 700;
}
.grafismo5{
background-image: url(/Portafolio\ Daniel/.grafismo5);
right: 1462.11px;
}
.text__information-cover{
position: absolute;
width: 1248px;
height: 156px;
left: 336px;
top: 413px;
}
.imgs{
display: flex;
justify-content: space-between;
right: 582px;
}
.img__Daniel__cover{
position: absolute;
left: 280px;
top: 1046px;
width: 372px;
height: 428px;
}
.img__groups__cover{
position: absolute;
width: 372px;
height: 538px;
left: 1234px;
top: 1022px;
}
.daniel-copy{
position: absolute;
left: 280px;
top: 1500px;
height: 78px;
width: 372px;
font-weight: 700;
font-size: 60px;
line-height: 130%;
color: #222222;
}
.product-designer{
position: absolute;
width: 266px;
height: 39px;
left: 280px;
top: 1572px;
font-weight: 700;
font-size: 30px;
line-height: 130%;
color: #2782ED;
}
.ceo-workpoint{
position: absolute;
width: 157px;
height: 26px;
left: 280px;
top: 1611px;
font-weight: 500;
font-size: 20px;
line-height: 130%;
color: #222222;
}
.cuatro-años{
position: absolute;
width: 788px;
height: 49px;
left: 280px;
top: 1663px;
color: #222222;
font-weight: 400;
font-size: 26px;
line-height: 190%;
}
.director-general{
position: absolute;
width: 972px;
height: 49px;
left: 280px;
top: 1712px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 190%;
color: #222222;
}
.actualmente-lidero{
position: absolute;
width: 880px;
height: 49px;
left: 280px;
top: 1761px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 190%;
color: #222222;
}
.grafismo2{
background-image: url(/Portafolio\ Daniel/.grafismo2);
position: absolute;
left: 1773px;
top: 1686px;
}
.logo-workpoint{
position: absolute;
width: 482px;
height: 296.83px;
left: 719px;
top: 2254px;
}
.agencia-data{
position: absolute;
left: 501px;
top: 2671px;
}
.copy-agencia{
position: absolute;
width: 1625px;
height: 106px;
left: 148px;
top: 2774px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 190%;
text-align: center;
color: #222222;
}
.no-buttons-1{
position: absolute;
left: 535px;
top: 2965px;
}
.no-buttons-2{
position: absolute;
left: 985px;
top: 2967px;
}
.grafismo3{
background-image: url(/Portafolio\ Daniel/.grafismo3);
position: absolute;
left: 0px;
top: 2889px;
}
.sub-titulo{
position: absolute;
width: 435px;
height: 78px;
left: 199px;
top: 3584px;
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 130%;
color: #FF4B4B;
}
.primer-parrafo{
position: absolute;
width: 853px;
height: 157px;
left: 199px;
top: 3676px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 190%;
color: #222222;
}
.segundo-parrafo{
position: absolute;
width: 916px;
height: 151px;
left: 199px;
top: 3847px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 190%;
color: #222222;
}
.resorte__third-cover{
position: absolute;
left: 1351px;
top: 3783px;
}
.hace-que{
position: absolute;
width: 494px;
height: 78px;
left: 199px;
top: 4052px;
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 130%;
color: #222222;
}
.no-entiendan{
position: absolute;
width: 853px;
height: 93px;
left: 199px;
top: 4144px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 190%;
color: #222222;
}
.terminan-perdiendo{
position: absolute;
left: 199px;
top: 4260px;
}
.remoto{
position: absolute;
width: 764px;
height: 78px;
left: 569px;
top: 4821px;
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 130%;
text-align: center;
color: #222222;
display: flex;
}
.remoto-color{
color: #2782ED;
}
.oportunidades-copy{
position: absolute;
width: 835px;
height: 103px;
left: 534px;
top: 4912px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 190%;
text-align: center;
color: #222222;
}
.oficina__fourth-cover{
position: absolute;
left: 220px;
top: 5133px;
}
.playa__fourth-cover{
position: absolute;
left: 1029px;
top: 5145px;
}
.viajes-playa{
position: absolute;
width: 392px;
height: 49px;
left: 338px;
top: 5586px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 190%;
text-align: center;
color: #222222;
}
.computador-cerrado{
position: absolute;
width: 338px;
height: 49px;
left: 1200px;
top: 5586px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 190%;
text-align: center;
color: #222222;
}
.data-importante{
position: absolute;
width: 735px;
height: 78px;
left: 593px;
top: 6070px;
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 130%;
text-align: center;
color: #222222;
}
.data-blue{
color: #2782ED;
}
.important-blue{
color: #2782ED;
}
.ultimo-copy{
position: absolute;
width: 896px;
height: 103px;
left: 512px;
top: 6180px;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 190%;
text-align: center;
color: #222222;
}
.rare-form{
position: absolute;
left: 738px;
top: 6341px;
}
.blue-form{
box-sizing: border-box;
position: absolute;
left: 0px;
top: 6784px;
background: #3090F6;
border: 1px solid #000000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel Arias</title>
<link href="/Portafolio Daniel/CODE/styles.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container__header">
<div class="menu">
<nav>
<ul>
<li><a href="#" class="inicio">inicio</a></li>
<li><a href="#" class="servicios">Servicios</a></li>
<li><a href="#" class="comunidad">Comunidad</a></li>
</ul>
</nav>
</div>
<div class="header__contacto">
<input type="button" class="btn__header-register" value="Contacto">
</div>
</div>
<div class="ilustrations">
<img src="/Portafolio Daniel/resources/imgs/Grafismo 5.png" class="grafismo5">
</div>
</header>
<main>
<div class="text__information-cover">
<div>
<img src="/Portafolio Daniel/resources/imgs/Cómo hacer crecer tu marca o producto a través del marketing digital.png">
</div>
</div>
<div class="cover">
<div class="media__cover">
<div class="imgs">
<img src="/Portafolio Daniel/resources/imgs/Daniel.png" class="img__Daniel__cover">
<img src="/Portafolio Daniel/resources/imgs/Group 2271.png" class="img__groups__cover">
</div>
<div>
<h2 class="daniel-copy">Daniel Arias</h2><br>
<p class="product-designer">Product Designer</p><br>
<p class="ceo-workpoint">CEO-Workpoint</p><br>
<ul>
<li class="cuatro-años">4 Años de experiencia en estrategia y diseño de procesos</li>
<li class="director-general">Director General y Co-Fundador de 2 organizaciones sin ánimo de lucro</li>
<li class="actualmente-lidero">Actualmente lidero 2 Startups que están creciendo rápidamente</li>
</ul>
</div>
</div>
</div>
<div class="ilustrations">
<img src="/Portafolio Daniel/resources/imgs/Grafismo 2.png" class="grafismo2">
</div>
<div class="second-cover">
<div class="container__media-cover2">
<img src="/Portafolio Daniel/resources/imgs/Group 2232.png" class="logo-workpoint">
</div>
<div class="text__workpoint-second-cover">
<img src="/Portafolio Daniel/resources/imgs/Agencia de DATA y Marketing.png" class="agencia-data"><br>
<p class="copy-agencia">Workpoint, es una startup dedicada a la recolección de data generada por los usuarios/clientes de las distintas empresas en Colombia, con el fin de analizarla para posteriormente generar estrategias de marketing que beneficien a las empresas. </p>
</div>
</div>
<div class="no-buttons__second-cover">
<img src="/Portafolio Daniel/resources/imgs/Group 2272.png" class="no-buttons-1">
<img src="/Portafolio Daniel/resources/imgs/Group 2273.png" class="no-buttons-2">
</div>
<div class="ilustrations">
<img src="/Portafolio Daniel/resources/imgs/Grafismo 3.png" class="grafismo3">
</div>
<div class="third-cover">
<div class="text-information__third-cover">
<div class="h4">
<h4 class="sub-titulo">Problemática</h4>
</div>
<div class="copy__third-cover">
<p class="primer-parrafo">Colombia hace parte de los paises que de manera más lenta transforma su industria y la adapta al los cambios tecnologicos, siempre espera a ver en que innova Estados Unidos o China.
</p><br>
<p class="segundo-parrafo">Muchos empresarios corren el pánico de que sus empresas quiebren debido a que no han sabido como adaptarse a la tecnología, y no es culpa de ellos, vienen de una epoca diferente a la actual.</p>
<img src="/Portafolio Daniel/resources/imgs/Group 2172.png" class="resorte__third-cover">
</div>
<div class="second-copy__third-cover">
<h5 class="hace-que">Esto hace que...</h5>
<p class="no-entiendan">No entiendan a sus usuarios/clientes, por lo que no saben como ofrecer sus productos o servicios de una manera adecuada.</p>
<div class="text-deforme__third-cover">
<img src="/Portafolio Daniel/resources/imgs/Terminan perdiendo clientes potenciales..png" class="terminan-perdiendo">
</div>
</div>
</div>
</div>
<div class="fourth/cover">
<div class="text-information__fourth-cover">
<h5 class="remoto">¿Qué es <span class="remoto-color">Trabajo remoto</span>?</h5>
<p class="oportunidades-copy">Dá más oportunidades de flexibilidad a los empleados, además te permite disminuir los costos fijos como arriendo y servicios.</p>
</div>
<div class="media-fourth-cover">
<img src="/Portafolio Daniel/resources/imgs/Art-247-oficina-gente-trabajando-1 1.png" class="oficina__fourth-cover">
<img src="/Portafolio Daniel/resources/imgs/portatil-playa-teletrabajador 1.png" class="playa__fourth-cover">
</div>
<div class="copy-imgs">
<p class="viajes-playa">A 10 horas de viaje de la playa</p>
<p class="computador-cerrado">Solo cierra el computador</p>
</div>
</div>
<div class="footer">
<div class="text-information_footer">
<h6 class="data-importante">La <span class="data-blue">DATA</span> es <span class="important-blue">IMPORTANTE</span></h6>
</div>
<div class="copy__footer">
<p class="ultimo-copy">Los datos de las personas (demográficos, psicográficos, comsumo) son la llave de la entrada al mundo digital.</p>
</div>
<div class="iustration">
<img src="/Portafolio Daniel/resources/imgs/Group 2239.png" class="rare-form">
</div>
</div>
<div class="container__blue-form">
<img src="/Portafolio Daniel/resources/imgs/Rectangle 2076.png" class="blue-form">
</div>
</main>
</body>
</html>