0

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>

1 respuesta 1

0

El problema esta en que le estas asignando un valor al menu lo que fuerza a desplaza el tamaño del navegador. Remplaza solo esto y listo!

.container__header{
    box-sizing: border-box;
    display: flex;
    position: absolute;
    width: 100%;
    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: 100vw;
    height: 26px;
    right: 418px;
    left: 1008px;
    display: flex;
    top: 27px;
}
3
  • Fíjate que el ancho del menú paso a ser de 100vw. Se veía un poco enredado el código, si te genera otro inconveniente escribime. Al probarlo comprobé que funciona pero no lo puedo ver al 100% el resto ya que no tengo las imágenes. Saludo! Commented el 19 ene. 2023 a las 14:57
  • Manito arriba si te sirvio! Me ayuda para mejorar mi reputación y poder seguir respondiendo mas preguntas y ayudar al resto! Commented el 19 ene. 2023 a las 14:58
  • Dale, de verdad gracias por tu respuesta, claro que si, gracias por la ayuda. Commented el 23 ene. 2023 a las 14:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.