1

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.

No ocupa el ancho

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>

1 respuesta 1

3

Si te refieres al borde blanco que aparece dentro del body prueba con esto:

body: {
    margin: 0;
}

Con esto te quedaría la página así:

body{
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box;
    margin: 0; /* Linea añadida */
}

: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>

1
  • 1
    Dios, estaba confundiendo al inicio de mi css el border por ese margin..No se que decir, estoy agradecido contigo.
    – Samuel
    Commented el 7 jun. a las 17:36

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.