I have a website (https://nullbrawl.org/), and I am facing an issue with the header. When users scroll down the page, the header moves along with the content instead of staying fixed at the top.

I want to make the header sticky so that it remains at the top of the page while scrolling. I tried some CSS tweaks, but they didn't work as expected.
i was copy this website null's brawl

Does anyone know the best way to fix this issue? Here’s a possible CSS solution I found, but I’d appreciate any improvements or alternative methods.
here is the header code
/* Make header sticky */
.header {
position: fixed;

left: 0;
width: 100%;
background: #fff; /* Adjust based on your theme */
z-index: 1000;
box-shadow: 0 4px 6px r(0, 0, 0, 0.1); /* Optional: Adds a slight shadow */

}
body {
padding-top: 70px; /* Adjust based on header height */
}