Angular project component style don't want to display - html

Question

i'm trying some css test on my project, but one of my component don't want to show his css.
This is my Angular structure :
my app.component.html
<div id="nav-bar">
<div id="nav-bar-content">
<div id="nav-bar-left">
<div>Pangolin</div>
</div>
<div id="nav-bar-right">
<div>Register</div>
</div>
</div></div>
<router-outlet></router-outlet>
my app.component.css
#nav-bar {
border: solide 5px red;
}
my app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'socialnetworkapp';
}
and this is what i have in my browser :
and this is my app.module.ts
// built in
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import {MatButtonModule} from '#angular/material/button';
//component import
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';
import { LoginComponent } from './components/login/login.component';
import { AccountComponent } from './components/account/account.component';
import { PageOneComponent } from './components/page-one/page-one.component';
import { navbarComponent } from './components/navbar/navbar.component';
import { SignUpComponent } from './components/sign-up/sign-up.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent,
UserComponent,
LoginComponent,
AccountComponent,
PageOneComponent,
navbarComponent,
SignUpComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
MatButtonModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
My /src/app/components/page-one module works perfectly. Is it some children, parents issue there ? I'm new on Angular

Answer 1

Your CSS is incorrect, solide should be solid:
#nav-bar {
border: solid 5px red;
}
See MDN border-style for a full list of valid border styles.