1

He intentado que mi página ocupe el 100% de ancho de la pantalla, pero en su lugar toma más espacio. También, queda un espacio gigante debajo del footer que no me permite eliminar. Necesito ayuda. He intentado arreglarlo, pero mi falta de conocimientos no me lo permite. Si alguien sabe cuál es el problema permítame saber, por favor.

Este es el código HTML:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/serviciosss.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <title>Oficina Nacional de la Propiedad Industrial</title>
    <meta>
    <script src="https://kit.fontawesome.com/705b8a906b.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <hr>
            <div class="logo">
                <a href="../Index.html"><img src="../img/reallogo.png" width="300px" height="75px"></a>
            </div>
                <div class="menu">
                    <ul>
                        <li><a href="../Index.html">INICIO</a></li>
                        <li><a href="../pags/somos.html">SOBRE NOSOTROS</a></li>
                        <li><a href="#">SERVICIOS</a></li>
                        <li><a href="../pags/noticias.html">NOTICIAS</a></li>
                        <li><a href="../pags/informacion.html">MÁS INFORMACIÓN</a></li>
                        <li><a href="../pags/login.html">SIGN UP</a></li>
                    </ul>
                    </div>   
        </div>
        <div class="content">
            <div class="quieness">
                <div class="forms"> 
                    <hr>
                    <h1 id="formularios">Nombres Comerciales</h1>
                </div>
                <div class="nct">
                <div class="emblema">
                    <i class="fa-solid fa-gears"></i>
                    <div id="a">
                    <h4>Emblema</h4>
                    <p>Cualquier signo figurativo usado para identificar a una empresa.</p>
                    </div>
                </div>    
                <div class="rotulo">
                    <i class="fa-solid fa-gears"></i>
                    <div id="b">
                    <h4>Registro de Rótulo</h4>
                    <p>Cualquier signo visible usado para identificar un local comercial, el mismo estará compuesto por una parte de-nominativa y una parte figurativa.</p>
                    </div>
                </div>
                <div class="nombrec">
                    <i class="fa-solid fa-gears"></i>
                    <div id="c">
                    <h4>Registro de Nombre Comercial</h4>
                    <p>Protege el nombre, denominación, designación o abreviatura que identifica a una empresa o establecimiento comercial.</p>
                    </div>
                </div>
                </div>
            </div> 
            <div class="search">
                <div class="busqueda">
                    <hr>
                    <h1 id="buscar">Marcas</h1>
                </div> 
            <div class="wayv">
                <div class="denominativa">
                    <i class="fa-solid fa-gears"></i>
                    <div id="d">
                        <h4>Registro Marca Denominativa</h4>
                        <p>Son las marcas formadas exclusivamente por palabras, letras y/o números, seudónimos, entre otros.</p>
                    </div>
                </div>
                <div class="figurativa">
                    <i class="fa-solid fa-gears"></i>
                    <div id="e">
                        <h4>Registro Marca Figurativa</h4>
                        <p>Son las marcas formadas exclusivamente por un diseño o figura, pueden consistir en retratos, orlas, viñetas.</p>
                    </div>
                </div>
                <div class="mixta">
                    <i class="fa-solid fa-gears"></i>
                    <div id="f">
                        <h4>Registro Marca Mixta</h4>
                        <p>Son las marcas formadas por un elemento denominativo y uno figurativo, ya sea un diseño con letras y/o números o una tipografía especial.</p>
                    </div>
                </div>
            </div>
            <div class="dream">
                <div class="sonora">
                    <i class="fa-solid fa-gears"></i>
                    <div id="g">
                        <h4>Registro Marca Sonora</h4>
                        <p>Este registro protege los sonidos, mediante representación gráfica, capaces de identificar los productos o servicios de la marca.</p>
                    </div>
                </div>
                <div class="certificacion">
                    <i class="fa-solid fa-gears"></i>
                    <div id="h">
                        <h4>Registro Marca Certificacion</h4>
                        <p>Este registro protege una marca aplicada a productos o servicios de terceros, cuyas características o calidad han sido certificadas por el titular de la Marca.</p>
                    </div>
                </div>
                <div class="tridimensional">
                    <i class="fa-solid fa-gears"></i>
                    <div id="i">
                        <h4>Registro Marca Tridimensional</h4>
                        <p>Este registro protege las formas de las marcas en sus tres dimensiones (alto, ancho y profundidad). Aplica tanto al producto mismo, como a los embalajes, los estuches, entre otros.</p>
                    </div>
                </div>
            </div>     
            </div>
        </div>
        <div class="footer">
            <div class="imgfooter">
                <a href="../Index.html"><img src="../img/reallogo2.png" width="300px" height="75"></a>
            </div>
            <div class="info">
                <div class="ccon">
                    <h5>Contactos</h5>
                    <p id="2">Tel.: (809) 567-7474</p>
                    <p id="3">[email protected]</p>
                </div>
                <div class="direx">
                    <h5>Dirección</h5>
                    <p id="1">Ave. de Los Próceres Núm. 11, Santo Domingo.</p>
                    <p id="7">2023 Todos los derechos reservados</p>
                </div>
                <hr>
            </div>
            <div class="ricons">
                <hr>
            <a href="https://twitter.com/OnapiRD?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="fa-brands fa-square-twitter"></i></a>
            <a href="https://es-la.facebook.com/OnapiRD/"><i class="fa-brands fa-square-facebook"></i></a>
            <a href="https://do.linkedin.com/company/onapi"><i class="fa-brands fa-linkedin"></i></a>
            <a href="https://www.instagram.com/onapi_rd/?hl=es"><i class="fa-brands fa-square-instagram"></i></a>
            </div>
        </div>            
    </div>
</body>
</html>

Y este es el código CSS:

  *,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    min-height: 200vh;
    box-sizing: border-box;
    width: 100%;
}

.header{
    position: relative;
    height: 150px ;
    width: 100%;
    background-color: #fff;
    align-items: center;
}
.header hr{
    position: relative;
    height:5px;
    width: 100%;
    background-color: #000;
}

.logo{
    position: relative;
    top: 0%;
    left: 40%;
    padding: 20px 0;
}
.logo img{
    align-self: center;
}

.menu{
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 0px 22%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: 1px 1px 2.5px #1a1b1a;
    width: 100%;
}

.menu ul{
    list-style: none;
    display: inline-block;
    align-items: center;
}

.header .menu ul li{
    float: left;
    position: relative;
    
}

.header .menu ul li a{
    font-size: 18px;
    color: #000;
    text-decoration: none;
    padding: 20px;
    display: block;
    transition: all .5s;
}

.header .menu ul li a:hover{
    background: #000;
    color: #fff;
    height: fit-content;
}

.quieness{
    position: relative;
    width: 100%;
    height: 650px;
}

.quieness h1{
    text-align: center;
}

.forms{
    position: relative;
    top: 100px;
}

.forms hr{
    height: 5px;
    width: 90px;
    margin: 0px 47%;
    background-color: #000;
}

.info2 p{
    position: relative;
    width: 70%;
    height: auto ;
    text-align: center;
    left: 14%;
}

.nct{
    position: relative;
    height: 30%;
    width: 100%;
    top: 150px;
}

.emblema{
    position: relative;
    width: 25%;
    left: 4%;
    background-color: #fff;
    box-shadow: 1px 1px 3px #000;
    border-radius: 20px;
}

#a{
    position: relative;
    width: 80%;
    height: 75px;
    left: 20%;
    top: -65px;
    padding: 10px;
}

.emblema i{
    position: relative;
    font-size: 40px;
    top: 40px;
    padding: 20px;
}

.rotulo{
    position: relative;
    width: 25%;
    left: 37.5%;
    top: -153px;
    background-color: #fff;
    box-shadow: 1px 1px 3px #000;
    border-radius: 20px;
}

#b{
    position: relative;
    width: 80%;
    height: 75px;
    left: 20%;
    top: -65px;
    padding: 10px;
}

.rotulo i{
    position: relative;
    font-size: 40px;
    top: 40px;
    padding: 20px;
}

.nombrec{
    position: relative;
    width: 25%;
    left: 71%;
    top: -305px;
    background-color: #fff;
    box-shadow: 1px 1px 3px #000;
    border-radius: 20px;
}

#c{
    position: relative;
    width: 80%;
    height: 75px;
    left: 20%;
    top: -65px;
    padding: 10px;
}

.nombrec i{
    position: relative;
    font-size: 40px;
    top: 40px;
    padding: 20px;
}

.search{
    position: relative;
    top: 100px;
}

.search hr{
    height: 5px;
    width: 90px;
    margin: 0px 47%;
    background-color: #000;
}

.search h1{
    text-align: center;
}

.busqueda{
    position: relative;
    width: 100%;
    height: 50px;
    top: -315px;
}

.wayv{
    position: relative;
    height: 100%;
    width: 100%;
    top: -250px;
}

.denominativa{
    position: relative;
    width: 25%;
    left: 4%;
    background-color: #fff;
    box-shadow: 1px 1px 3px #000;
    border-radius: 20px;
}

#d{
    position: relative;
    width: 80%;
    height: 75px;
    left: 20%;
    top: -65px;
    padding: 10px;
}

.denominativa i{
    position: relative;
    font-size: 40px;
    top: 40px;
    padding: 20px;
}

.figurativa{
    position: relative;
    width: 25%;
    left: 37.5%;
    top: -153px;
    background-color: #fff;
    box-shadow: 1px 1px 3px #000;
    border-radius: 20px;
}

#e{
    position: relative;
    width: 80%;
    height: 75px;
    left: 20%;
    top: -65px;
    padding: 10px;
}

.figurativa i{
    position: relative;
    font-size: 40px;
    top: 40px;
    padding: 20px;
}

.mixta{
    position: relative;
    width: 25%;
    left: 71%;
    top: -307px;
    background-color: #fff;
    box-shadow: 1px 1px 3px #000;
    border-radius: 20px;
}

#f{
    position: relative;
    width: 80%;
    height: 75px;
    left: 20%;
    top: -65px;
    padding: 10px;
}

.mixta i{
    position: relative;
    font-size: 40px;
    top: 40px;
    padding: 20px;
}

.dream{
    position: relative;
    height: 30%;
    width: 100%;
    top: -500px;
}

.sonora{
    position: relative;
    width: 25%;
    left: 4%;
    background-color: #fff;
    box-shadow: 1px 1px 3px #000;
    border-radius: 20px;
}

#g{
    position: relative;
    width: 80%;
    height: 75px;
    left: 20%;
    top: -65px;
    padding: 10px;
}

.sonora i{
    position: relative;
    font-size: 40px;
    top: 40px;
    padding: 20px;
} 

.certificacion{
    position: relative;
    width: 25%;
    left: 37.5%;
    top: -153px;
    background-color: #fff;
    box-shadow: 1px 1px 3px #000;
    border-radius: 20px;
    padding-bottom: 10px;
}

#h{
    position: relative;
    width: 80%;
    height: 75px;
    left: 20%;
    top: -65px;
    padding: 10px;
}

.certificacion i{
    position: relative;
    font-size: 40px;
    top: 40px;
    padding: 20px;
}

.tridimensional{
    position: relative;
    width: 25%;
    left: 71%;
    top: -320px;
    background-color: #fff;
    box-shadow: 1px 1px 3px #000;
    border-radius: 20px;
    padding-bottom: 10px;
}

#i{
    position: relative;
    width: 80%;
    height: 75px;
    left: 20%;
    top: -65px;
    padding: 10px;
}

.tridimensional i{
    position: relative;
    font-size: 40px;
    top: 40px;
    padding: 20px;
}



.footer{
    position: relative;
    top: -600px;
    height: 500px;
    width: 100%;
    background-color: #000;
    align-items: center;
}

.imgfooter{
    position: relative;
    top: 20px;
    left: 40%;
    padding: 20px 0;
}

.info h5{
    color: #fff;
    font-size: 25px;
}

.info p{
    color: #D5DBDB ;
    font-size: 15px;
}

.ccon{
    position: relative;
    text-align: right;
    left: -52%;
    top: 70px;

}

.direx{
    position: relative;
    text-align: left;
    left: 52%;
}
.info hr{
    position: relative;
    height: 100px;
    width: 3px;
    margin: 0px 60px;
    background-color: #fff;
    left: 46%;
    top:-80px;
}

.ricons{
    position: relative;
    top: 80px;
    align-items: center;
}
.ricons hr{
    position: relative;
    width: 100%;
    background-color: #fff;
    top: -5px;
}

.ricons i{
    color: #fff;
}

.ricons a{
    position: relative;
    left: 43.6%;
    align-items: center;
    font-size: 40px;
    padding: 0px 5px;
}

Aquí algunas imágenes para que conozcan el alcance del problema.

La primera es del espacio que aparece a la derecha del contenido. Hace que la página ocupe más del 100% de la pantalla.

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

La segunda es del espacio en blanco que queda debajo del footer y que no me permite modificarlo.

introducir la descripción de la imagen aquí

1 respuesta 1

1

Tus logos, el del arriba y el de abajo tienen un left, asi como también tu clase direx, estos ocasionan el problema del scroll horizontal.

En general todos es left que tienes hacen el problema, pero no solo este si no que cuando quieras que tu página se vea bien en dispositivos móviles será imposible

Además tienes un caos con clases, a cada elemento le creas una y tienes un CSS muy grande para lo que es tu página. La idea de una clase CSS es que sea reutilizable.

Lamentablemente es mucho lo que habría que explicar para corregir tu HTML y CSS, lo más que te puede ofrecer es un código, que si bien está basado en el tuyo, he hecho varios cambios espero que te sirva y lo estudies, seguro te será fácil a partir de él agregar más contenido. Además, a excepción del menú, ya es todo responsivo.

*,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        header {
            position: relative;
            width: 100%;
            background-color: #fff;
            align-items: center;
        }


        .logo {
            padding: 20px 0;
            display: flex;
            justify-content: center;
        }

        .menu {
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 1px 1px 2.5px #1a1b1a;
        }

            .menu ul {
                list-style: none;
                display: inline-block;
                align-items: center;
            }

        header .menu ul li {
            display: inline-block;
            position: relative;
        }

            header .menu ul li a {
                font-size: 18px;
                color: #000;
                text-decoration: none;
                padding: 20px;
                display: block;
                transition: all .5s;
            }

                header .menu ul li a:hover {
                    background: #000;
                    color: #fff;
                    height: fit-content;
                }

    main{
        margin:0 15px;
    }
        .rotulo {
            background-color: #fff;
            box-shadow: 1px 1px 3px #000;
            border-radius: 20px;
            margin: 20px;
            display: grid;
            padding: 20px;
            grid-template-columns: 80px 1fr;
        }
            .rotulo i{
                font-size:42px;
                align-self:center;
            }
            section {
                margin-top: 40px;
            }

            section > h1 {
                margin-bottom: 40px;
                text-align: center;
            }

                section > div {
                    display: grid;
                    width: 100%;
                    grid-template-columns: repeat(auto-fit, minmax(min(480px,100%),1fr));
                    gap: 10px;
                }

        hr {
            height: 5px;
            width: 90px;
            background-color: #000;
            margin:0 auto;
        }


        footer {
            margin-top:40px;
            width: 100%;
            background-color: #000;
            display:flex;
            flex-direction:column;
            align-items: center;
        }

        .imgfooter {
            margin: 32px auto;
        }
        footer .info{
            display:grid;
            grid-template-columns: 1fr 2px 1fr;
            gap:20px;
        }
        .vertical-line{
            background:white;
            width:2px;
            height:100%;
        }
        .right{
            text-align:right;
        }
        .info h5 {
            color: #fff;
            font-size: 25px;
        }

        .info p {
            color: #D5DBDB;
            font-size: 15px;
        }

  
        .info hr {
            position: relative;
            height: 100px;
            width: 3px;
            margin: 0px 60px;
            background-color: #fff;
            left: 46%;
            top: -80px;
        }

        .ricons {
            border-top: 2px solid white;
            width: 100%;
            margin-top: 20px;
            padding: 6px;
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            box-sizing: border-box;
        }
        .ricons i {
            color: #fff;
        }

            .ricons a {
                font-size: 40px;
                padding: 0px 5px;
            }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/705b8a906b.js" crossorigin="anonymous"></script>

<header>
    <div class="logo">
        <a href="../Index.html"><img src="../img/reallogo.png" width="300" height="75" /></a>
    </div>
    <div class="menu">
        <ul>
            <li><a href="../Index.html">INICIO</a></li>
            <li><a href="../pags/somos.html">SOBRE NOSOTROS</a></li>
            <li><a href="#">SERVICIOS</a></li>
            <li><a href="../pags/noticias.html">NOTICIAS</a></li>
            <li><a href="../pags/informacion.html">MÁS INFORMACIÓN</a></li>
            <li><a href="../pags/login.html">SIGN UP</a></li>
        </ul>
    </div>
</header>

<main>
    <section>
        <hr>
        <h1 id="formularios">Nombres Comerciales</h1>

        <div>
            <div class="rotulo">
                <i class="fa-solid fa-gears"></i>
                <div>
                    <h4>Emblema</h4>
                    <p>Cualquier signo figurativo usado para identificar a una empresa.</p>
                </div>
            </div>
            <div class="rotulo">
                <i class="fa-solid fa-gears"></i>
                <div>
                    <h4>Registro de Rótulo</h4>
                    <p>Cualquier signo visible usado para identificar un local comercial, el mismo estará compuesto por una parte de-nominativa y una parte figurativa.</p>
                </div>
            </div>
            <div class="rotulo">
                <i class="fa-solid fa-gears"></i>
                <div>
                    <h4>Registro de Nombre Comercial</h4>
                    <p>Protege el nombre, denominación, designación o abreviatura que identifica a una empresa o establecimiento comercial.</p>
                </div>
            </div>
        </div>
    </section>
    <section>
        <hr>
        <h1 id="formularios">Marcas</h1>

        <div>
            <div class="rotulo">
                <i class="fa-solid fa-gears"></i>
                <div>
                    <h4>Registro Marca Denominativa</h4>
                    <p>Son las marcas formadas exclusivamente por palabras, letras y/o números, seudónimos, entre otros.</p>
                </div>
            </div>
            <div class="rotulo">
                <i class="fa-solid fa-gears"></i>
                <div>
                    <h4>Registro Marca Figurativa</h4>
                    <p>Son las marcas formadas exclusivamente por un diseño o figura, pueden consistir en retratos, orlas, viñetas.</p>
                </div>
            </div>
            <div class="rotulo">
                <i class="fa-solid fa-gears"></i>
                <div>
                    <h4>Registro Marca Mixta</h4>
                    <p>Son las marcas formadas por un elemento denominativo y uno figurativo, ya sea un diseño con letras y/o números o una tipografía especial.</p>
                </div>
            </div>

            <div class="rotulo">
                <i class="fa-solid fa-gears"></i>
                <div>
                    <h4>Registro Marca Sonora</h4>
                    <p>Este registro protege los sonidos, mediante representación gráfica, capaces de identificar los productos o servicios de la marca.</p>
                </div>
            </div>
            <div class="rotulo">
                <i class="fa-solid fa-gears"></i>
                <div>
                    <h4>Registro Marca Certificacion</h4>
                    <p>Este registro protege una marca aplicada a productos o servicios de terceros, cuyas características o calidad han sido certificadas por el titular de la Marca.</p>
                </div>
            </div>
            <div class="rotulo">
                <i class="fa-solid fa-gears"></i>
                <div>
                    <h4>Registro Marca Tridimensional</h4>
                    <p>Este registro protege las formas de las marcas en sus tres dimensiones (alto, ancho y profundidad). Aplica tanto al producto mismo, como a los embalajes, los estuches, entre otros.</p>
                </div>
            </div>
        </div>
    </section>
    
</main>
<footer>
    <a href="../Index.html" class="imgfooter"><img src="../img/reallogo2.png" width="300" height="75"></a>

    <div class="info">
        <div class="right">
            <h5>Contactos</h5>
            <p>Tel.: (809) 567-7474</p>
            <p>[email protected]</p>
        </div>
        <div class="vertical-line"></div>
        <div>
            <h5>Dirección</h5>
            <p id="1">Ave. de Los Próceres Núm. 11, Santo Domingo.</p>
            <p id="7">2023 Todos los derechos reservados</p>
        </div>
    </div>
    <div class="ricons">
        <a href="https://twitter.com/OnapiRD?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="fa-brands fa-square-twitter"></i></a>
        <a href="https://es-la.facebook.com/OnapiRD/"><i class="fa-brands fa-square-facebook"></i></a>
        <a href="https://do.linkedin.com/company/onapi"><i class="fa-brands fa-linkedin"></i></a>
        <a href="https://www.instagram.com/onapi_rd/?hl=es"><i class="fa-brands fa-square-instagram"></i></a>
    </div>
</footer>

2
  • Muchas gracias @Yussef por la ayuda 🙏🏻😭. Tengo el mismo problema con las demás páginas de mi proyecto. ¿Podrías decirme que tengo que hacer para solucionarlo?
    – Lis
    Commented el 28 feb. 2023 a las 18:49
  • @Lis Sin ver lo que tienes es dificil, pero en general tu deberás colocar los elementos de las otras páginas dentro del <main>
    – Yussef
    Commented el 28 feb. 2023 a las 20:45

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.