the header is not displayed in red color

byMR

March 16, 2022

I would like to obtain this type of result in HTML/CSS:

example

The header is in red color, but I don’t display it in my result below…

my result

How could I display the color in red, please?I think I missed a step?

Here’s a reproduction if you want in CSS/HTML

Thank you very much for your help concerning my problem.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: #2af598;
    font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

h1 {
    color: #fff;
    font-size: 2.5rem;
    text-align: center;
    padding: 50px 0;
}


/* MENU - SIDEBAR */


/* C'est le fond bleu vertical */

.sidebar {
    width: 20%;
    background-color: #fff;
    /*#239cd3;*/
    height: 781px;
}


/* C'est le logo */

.sidebar .logo-details {
    height: 100px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid black;
}


/* Centraliser les rubriques */

.sidebar .menu {
    position: relative;
    padding: 15px 15px 15px 45px;
    color: #4d4d4d;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.4s ease;
}


/* Ajustage icones  */

.sidebar li i {
    position: absolute;
    top: 1.2rem;
    left: 1rem;
    color: #595959;
    transition: all 0.4s ease;
}


/* Placer les flèches à droite */

.sidebar li i.fa-chevron-down {
    right: 1rem;
    left: auto;
}


/* Pivoter en haut / en bas la flèche */

.sidebar li.active i.fa-chevron-down {
    transform: rotate(180deg);
}


/* Changement de couleur de la rubrique après clique */

.sidebar li.active .menu {
    color: #b63b4d;
}


/* Changement de couleur icones après clique */

.sidebar li.active i {
    color: #b63b4d;
}


/* Adaptation fond pour le sous menu */

.submenu {
    height: 0;
    overflow: hidden;
    background: #fff;
    /* #239cd3;*/
    font-size: 14px;
    transition: height 0.4s ease;
}


/* Ligne de séparateur sur chaque submenu */

.submenu li {
    border-bottom: 1px solid #4b4a5e;
}


/* Sous-menu après cliquage */

.submenu a {
    display: block;
    text-decoration: none;
    color: blue;
    padding: 12px;
    padding-left: 42px;
    transition: all 0.25s ease-in-out;
}


/* Survole submenu en couleur */

.submenu a:hover {
    background: #b63b4d;
    color: #fff;
}


/* Header */

.header {
    position: relative;
    height: 100px;
    background-color: red;
    margin: 0 0 0 300px;
}

<div class="sidebar">
    <div class="logo-details"> </div>
    <ul>
        <li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
            <ng-container>
                <div class="menu" (click)="selectMenu(menu)">
                    <i [class]="menu.iconClass"></i> {{ menu.name }}
                    <i class="fa fa-chevron-down"></i>
                </div>
                <ul class="submenu" #submenu [ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' }">
                    <li *ngFor="let submenu of menu.submenu">
                        <a routerLink="{{ submenu.url }}"> {{ submenu.name }} </a>
                    </li>
                </ul>
            </ng-container>
        </li>
    </ul>
</div>

<div class="header">
    <div>text</div>
</div>