Logo (Akatsuki) not aligning with nav items

HTML-CSS
#1

CodePen

If you see, I have header { display: flex; align-items: flex-start;} BUT flex-start won’t work for Akatsuki. Neither center, neither the others.

Why?

#2

Inspect h1 element and you’ll see that browser sets default margin.

#3

Oh, so I have to do :root { margin: 0; padding: 0;?