Estoy estructurando una página con HTML y CSS puro.
Tengo un problema y es que los elementos de la página tienen un pequeño borde que no lo logro quitar con nada.
Lo solucione con la barra de navegación ya que con la posicion fija le pude establecer posición a la derecha y a la izquierda, pero en los siguientes elementos, en este caso una sección, ocurre lo mismo: Hay un borde que despega mi sección del borde de la pantalla y aunque le ponga un ancho del 100% no ocurre nada. Trate de cambiarle la posición, el display y más cosas, pero nada lo soluciona, más que la posición relativa con un left: 0
y right: 0
Aquí se ve la imagen, el cuadro rojo no ocupa el 100% de mi pantalla.
El código:
body{
padding: 0 !important;
border: 0 !important;
box-sizing: border-box;
}
:root{
--yellow-color: #ffcc00;
--blue-color: #003466;
}
header{
background-color: var(--blue-color);
position: fixed;
top: 0;
left: 0;
min-width: 100%;
height: 8rem;
display: flex;
justify-content: space-between;
place-items: center;
}
.logo{
font-size: 20px;
margin-left: 5rem;
width: 3.1rem;
font-family: sans-serif;
}
.logo h2{
color: var(--yellow-color);
}
.navbar{
margin-right: 1.25rem;
}
.navbar nav ul{
display: flex;
gap: 2rem;
list-style-type: none;
}
.navbar nav ul li a{
text-decoration: none;
color: white;
font-size: 1.17rem;
font-weight: bold;
padding-bottom: 5px;
}
.navbar nav ul a{
position: relative;
}
.navbar nav ul a::after{
content: "";
position: absolute;
left: 0;
width: 0;
bottom: 0;
height: 3px;
background-color: var(--yellow-color);
transition: all 0.3s ease;
}
.navbar nav ul a:hover:after{
width: 70%;
}
main{
margin-top: 8rem; /* navbar height */
}
section{
min-height: calc(100vh - 8rem);
border: none;
}
.main__container{
/* background-image: url(resources/Grado-de-Bachillerato-virtual-Colegio-Gimnasio-Americano-1.jpg); */
/* background-repeat: no-repeat; */
/* background-size: 100%; */
/* background-position: center; */
background-color: red;
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.main__container .inscriptions__card{
background-color: var(--yellow-color);
height: 16rem;
width: 24rem;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
border: solid 3px var(--blue-color);
border-radius: 25px;
}
.main__container img{
border-radius: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gimnasio Americano</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<h2>Colegio Gimnasio Americano</h2>
</div>
<div class="navbar">
<nav>
<ul>
<li><a href="#main">Inicio</a></li>
<li><a href="#main">Aula Virtual</a></li>
<li><a href="#main">Legal</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="main__container">
<div class="inscriptions__card">
<h1>Inscripciones Abiertas</h1>
<h2>2024-1</h2>
</div>
<img src="resources/Colegio-Gimnasio-Americano-Logo-3.png" alt="Gimnasio Americano Logo.png">
</section>
</main>
</body>
</html>