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.
La segunda es del espacio en blanco que queda debajo del footer y que no me permite modificarlo.