hi, im new at programming and im creating a site for a school assignement, i'm trying to create a navbar that dont scroll whit the page, but if i use the attribute "position: fixed" it create the this 
the black thing its not centered and not like this:
the HTML is this:
<!doctype html>
<html lang="it">
<head>
<title>Sicurezza Informatica</title>
<link rel="icon" href="Foto/logo (2).png">
<link rel="stylesheet" type="text/css" href="Pagina 1.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Cherokee:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
</head>
<body style="background-color: #4F8EAD;">
<header style="background-color: #242424;" >
<img src="Foto/logo.png" alt="logo" width="180" class="logo">
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#malware come difendersi">Video</a></li>
<li><a href="#cosa fare">Cosa Fare</a></li>
</ul>
</nav>
<button>Accedi</button>
<hr>
</header>
<br>
<p style="text-align: center;">I <b>Malaware</b> sono software malevoli capaci di intrufolarsi nei computer, nei dispositivi mobile e nelle reti aziendali per <b>rubare dati personali</b>, spiare le vittime e danneggiare i sistemi infetti. Ecco come riconoscerli e come adottare le necessarie contromisure per prevenire un' infezione e difendersi da un possibile attacco</p>
<br>
<div style="text-align: center" >
<img width="50%" style="border-radius: 2%" alt="Hacker" src="Foto/hacking-2964100.jpg" title="Sicurezza informatica">
</div>
<br>
<br>
<p style="text-align: center;">Ecco un <b>video</b> per capire come eliminare tutti i <b>virus</b> presenti sul pc</p>
<br>
<div style="text-align: center; border-radius: 50%;">
<video id="malware come difendersi" style="text-align: center;" width="50%" controls>
<source src="Come RIMUOVERE QUALSIASI VIRUS dal computer.mp4" type="video/mp4">
</video>
</div>
<br>
<p style="text-align: center;" id="cosa fare" >Ed ecco 10 Semplici passaggi per proteggersi</p>
<ul class="10 cose">
<li>1. Utilizzare un software antivirus e mantenerlo sempre aggiornato.</li>
<li>2. Utilizzare un firewall per proteggere il proprio sistema dalle connessioni non autorizzate.</li>
<li>3. Utilizzare un software anti-spyware per rimuovere eventuali software spia presenti sul sistema.</li>
<li>4. Non aprire allegati di posta elettronica o link sospetti, anche se inviati da fonti conosciute.</li>
<li>5. Fare attenzione ai siti web che si visitano e non accedere a siti sospetti o che richiedono informazioni personali.</li>
<li>6. Utilizzare un browser web sicuro e mantenerlo sempre aggiornato.</li>
<li>7. Utilizzare una rete privata virtuale (VPN) per proteggere la propria connessione quando si utilizza una connessione wireless pubblica.</li>
<li>8. Utilizzare un software di crittografia per proteggere i propri dati.</li>
<li>9. Tenere sempre una copia di backup dei propri dati importanti.</li>
<li>10. Tenere sempre il sistema operativo e le applicazioni aggiornate con gli ultimi aggiornamenti di sicurezza.</li>
</ul>
<p style="text-align: center;">Ricorda che la <b>sicurezza informatica</b> è un processo in continuo evoluzione, quindi è importante rimanere sempre informati sui nuovi rischi e sulle ultime tecniche di difesa.</p>
<br>
</body>
</html>
and the css this:
body{
text-align: center
}
ol{
font-family: 'Noto Sans Cherokee', sans-serif;
font-size: 100%;
}
h3
{
font-family: 'Noto Sans Cherokee', sans-serif;
font-size: 120%;
}
p
{
font-family: 'Noto Sans Cherokee', sans-serif;
font-size: 100%
}
a
{
font-family: 'Noto Sans Cherokee', sans-serif;
font-size: 100%
}
h1 {
font-family: 'Roboto Mono', monospace;
color: chocolate;
font-size: 300%;
}
ul {
list-style-type: none;
font-family: 'Noto Sans Cherokee', sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.menu,
a,
button {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 14;
color: white;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
color: #242424;
}
.menu {
list-style: none;
}
.menu li {
display: inline-block;
padding: 0px 20px;
}
.menu li a {
transition: all .3s ease;
}
.menu a:hover {
color: #39f;
}
button {
padding: 9px 25px;
background: #0d94a6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all .3s ease;
}
button:hover {
background: #39f;
}
please help me i dont know how to do it
the black thing its not centered and not like this:
the HTML is this:
<!doctype html>
<html lang="it">
<head>
<title>Sicurezza Informatica</title>
<link rel="icon" href="Foto/logo (2).png">
<link rel="stylesheet" type="text/css" href="Pagina 1.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Cherokee:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
</head>
<body style="background-color: #4F8EAD;">
<header style="background-color: #242424;" >
<img src="Foto/logo.png" alt="logo" width="180" class="logo">
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#malware come difendersi">Video</a></li>
<li><a href="#cosa fare">Cosa Fare</a></li>
</ul>
</nav>
<button>Accedi</button>
<hr>
</header>
<br>
<p style="text-align: center;">I <b>Malaware</b> sono software malevoli capaci di intrufolarsi nei computer, nei dispositivi mobile e nelle reti aziendali per <b>rubare dati personali</b>, spiare le vittime e danneggiare i sistemi infetti. Ecco come riconoscerli e come adottare le necessarie contromisure per prevenire un' infezione e difendersi da un possibile attacco</p>
<br>
<div style="text-align: center" >
<img width="50%" style="border-radius: 2%" alt="Hacker" src="Foto/hacking-2964100.jpg" title="Sicurezza informatica">
</div>
<br>
<br>
<p style="text-align: center;">Ecco un <b>video</b> per capire come eliminare tutti i <b>virus</b> presenti sul pc</p>
<br>
<div style="text-align: center; border-radius: 50%;">
<video id="malware come difendersi" style="text-align: center;" width="50%" controls>
<source src="Come RIMUOVERE QUALSIASI VIRUS dal computer.mp4" type="video/mp4">
</video>
</div>
<br>
<p style="text-align: center;" id="cosa fare" >Ed ecco 10 Semplici passaggi per proteggersi</p>
<ul class="10 cose">
<li>1. Utilizzare un software antivirus e mantenerlo sempre aggiornato.</li>
<li>2. Utilizzare un firewall per proteggere il proprio sistema dalle connessioni non autorizzate.</li>
<li>3. Utilizzare un software anti-spyware per rimuovere eventuali software spia presenti sul sistema.</li>
<li>4. Non aprire allegati di posta elettronica o link sospetti, anche se inviati da fonti conosciute.</li>
<li>5. Fare attenzione ai siti web che si visitano e non accedere a siti sospetti o che richiedono informazioni personali.</li>
<li>6. Utilizzare un browser web sicuro e mantenerlo sempre aggiornato.</li>
<li>7. Utilizzare una rete privata virtuale (VPN) per proteggere la propria connessione quando si utilizza una connessione wireless pubblica.</li>
<li>8. Utilizzare un software di crittografia per proteggere i propri dati.</li>
<li>9. Tenere sempre una copia di backup dei propri dati importanti.</li>
<li>10. Tenere sempre il sistema operativo e le applicazioni aggiornate con gli ultimi aggiornamenti di sicurezza.</li>
</ul>
<p style="text-align: center;">Ricorda che la <b>sicurezza informatica</b> è un processo in continuo evoluzione, quindi è importante rimanere sempre informati sui nuovi rischi e sulle ultime tecniche di difesa.</p>
<br>
</body>
</html>
and the css this:
body{
text-align: center
}
ol{
font-family: 'Noto Sans Cherokee', sans-serif;
font-size: 100%;
}
h3
{
font-family: 'Noto Sans Cherokee', sans-serif;
font-size: 120%;
}
p
{
font-family: 'Noto Sans Cherokee', sans-serif;
font-size: 100%
}
a
{
font-family: 'Noto Sans Cherokee', sans-serif;
font-size: 100%
}
h1 {
font-family: 'Roboto Mono', monospace;
color: chocolate;
font-size: 300%;
}
ul {
list-style-type: none;
font-family: 'Noto Sans Cherokee', sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.menu,
a,
button {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 14;
color: white;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
color: #242424;
}
.menu {
list-style: none;
}
.menu li {
display: inline-block;
padding: 0px 20px;
}
.menu li a {
transition: all .3s ease;
}
.menu a:hover {
color: #39f;
}
button {
padding: 9px 25px;
background: #0d94a6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all .3s ease;
}
button:hover {
background: #39f;
}
please help me i dont know how to do it