Thiết kế website giá rẻ

Question

I want to center the text in the main, but still there is a gap between the sidebar and the main, I want a specific width in the sidebar, I don’t know what else to do, please help.

I have tried using a specified width in the template columns but it does whatever it wants, and the justify contents leaves a gap.

CSS:

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Ottoman+Siyaq&display=swap');

/*Estilo para todo el html*/
* {
    box-sizing: border-box;

    font-family: "Noto Serif Ottoman Siyaq", serif;
    font-weight: 400;
    font-style: normal;

}

body {

    margin: 0;


}



/*cuerpo de la pagina*/
.total {
    display: grid;
    grid-template-areas:
        'header  header header header header header header'
        'sidebar main main main main main main'
        'sidebar footer footer footer footer footer footer';
    height: 100%;

}

/* cabecera muestra contenido en flex row y reparte espacio entre elementos*/
header {
    grid-area: header;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 60px;
    border: 1px solid #DAC4DB;
    background-color: #70397F;
    color: #DAC4DB;
}

/* elemeentos de la cabecera muestran su contenido en flex row y alinea al centro*/
header>div {

    display: flex;
    flex-direction: row;
    align-items: center;
}


/*Tamaño de letra*/
.cabecera {
    font-size: 20px;
}

/* Estilo para enlaces*/

a:link {
    color: #70397F;
    text-decoration: none;
}

a:visited {
    color: #70397F;
    text-decoration: none;
}







/*Menu lateral con elementos mostrados en flex columns*/

sidebar {
    grid-area: sidebar;
    background-color: #DAC4DB;
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: flex-start;


    height: 100%;
    max-width: fit-content;

}

/* Elementos del sidebar*/
sidebar>div {
    font-size: 1rem;
    color: #70397F;
    height: 5%;
    display: flex;
    width: 100%;
    padding-right: 8px;
    border-bottom: 1px solid #70397F;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}

/*animacion del sidebar*/
sidebar div:hover {

    background-color: #B59DB6;

}



/* parte principal*/
main {
    grid-area: main;
    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-content: center;
    margin: 0px auto;
    height: 1000px;
    width: 100%;
}


/* pie de pagina ocupa 100% del contenedor principal*/

footer {
    grid-area: footer;
    padding-top: 25px;
    padding-bottom: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: sticky;
    z-index: 10;
    clear: both;
}

/* padding para iconos*/
i {
    padding: 7px;
}

.cuadrado-icon {
    padding-top: 5px;
}

.casa-icon {
    padding-top: 3px;

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ProyectoFP</title>

    <link rel="stylesheet" href="css/main.css">
    <script src="https://kit.fontawesome.com/efd4e72963.js" crossorigin="anonymous"></script>

</head>

<body>

    <div class="total">
        <header>



            <div>
                <i class="fa-solid fa-school" style="margin-bottom: 7px;"></i>
                <div class="cabecera">Nombre del centro</div>
            </div>
            <div>

                <div class="cabecera">Nombre del usuario</div> <i class="fa-solid fa-user-pen"
                    style="margin-bottom: 6px;"></i>
            </div>



        </header>


        <sidebar>
            <div>
                <i class="fa-solid fa-house"></i>
                <a href="">CENTRO</a>

            </div>
            <div>

                <i class="fa-solid fa-book"></i>
                <a href="">MÓDULO</a>

            </div>
            <div>

                <i class="fa-solid fa-chalkboard-user"></i>
                <a href="">TUTORÍAS</a>

            </div>
            <div>
                <i class="fa-solid fa-file-lines"></i>
                <a href="">CALIFICACIONES</a>

            </div>

        </sidebar>







        <main>

            <h2>TRENDIG NEWS ON PORTAL</h2>


        </main>


        <footer>

            <p>2024 copyright© María Pérez. All rights reserved</p>

        </footer>




    </div>
</body>

</html>

Thiết kế website giá rẻ

Danh mục

Why does the 1st grid occupy more space than the rest?